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“JavaScript patterns” ? i# - (JavaScript 模式 》 


e 作者 : Stoyan Stefanov 
© 翻译 : 7r ` goddyzhao ` TooBug 


偷懒 是 程序 员 的 优良 品质 ， 模 式 则 是 先 人 们 总 结 的 偷懒 招式 。Stoyan Stefanov 的 这 本 书 ， 从 
JavaScript 的 实际 使 用 场景 出 发 ， 提 炼 了 不 少 可 以 让 前 端 们 偷懒 的 实用 招式 。 模 式 的 探索 、 
创新 ， 将 永远 是 程序 员 自 我 提升 的 一 条 修炼 之 道 。 值 得 一 读 。 
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第 一 草 概述 


e 模式 

e JavaScript : 概念 
o 面向 对 象 
5 ER 
o 原型 
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e ECMAScript 5 
e JSLint 
。 控制 台 工具 


第 二 章 高 质量 JavaScript 基 本 要 点 


e 编写 可 维护 的 代码 
减少 全 局 对 象 

o 全 局 对 象 带 来 的 困扰 

o 忘记 var 时 的 副作用 

o 访问 全 局 对 象 

o 单 var 模式 

o 声明 提前 : 分 散 的 var 带 来 的 问题 
e for 循环 
for-in 循环 
© (F) 扩充 内 置 原型 
switch 模式 
© 避免 隐 式 类 型 转换 

o 避免 使 用 eval() 
使 用 parselnt() 进 行 数字 转换 
编码 风格 

o 缩 进 


o 花 括 号 
o 左 花 括号 的 放置 
o 空格 


o 其 他 命名 风格 
e 书写 API 文 档 
o 一 个 例子 : YUIDoc 
编写 易 读 的 代码 
e 相互 评审 
生产 环境 中 的 代码 压缩 (Minify ) 
e 运行 JSLint 
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对 象 直接 量 

o 对 象 直接 量 语法 

o 通过 构造 函数 创建 对 象 
o 获得 对 象 的 构造 器 
自 定义 构造 函数 

o 构造 函数 的 返回 值 
强制 使 用 new 的 模式 

o 命名 约定 

o 使 用 that 

o 调用 自身 的 构造 函数 
数组 直接 量 

o 数组 直接 量 语法 

o 有 意思 的 数组 构造 器 
o 检查 是 不 是 数组 
JSON 

o 使 用 JSON 

正则 表达 式 直接 量 

o 正则 表达 式 直接 量 语法 
原始 值 的 包装 对 象 
Error 对 象 

小 结 


第 四 章 函数 


背景 知识 

o 术语 释义 

o 声明 Vs 表达 式 : 命名 与 提前 
o 函数 的 name 属 性 

o 函数 提前 

回调 模式 

o 一 个 回调 的 例子 

o 回调 和 作用 域 

o 异步 事件 监听 

o 超时 

o 库 中 的 回调 

返回 函数 

自 定 义 函 数 

立即 执行 的 函数 

o 立即 执行 的 函数 的 参数 
o 立即 执行 的 隐 数 的 返回 值 


ua 


o 好 处 和 用 法 
。 立即 初始 化 的 对 象 
© 条 件 初始 化 
。 函数 属性 一 “Memoization 模 式 
。 配置 对 象 
e 柯 里 化 (Curry) 
o 部 分 应 用 
o 柯 里 化 
o 什么 时 候 使 用 柯 里 化 


@ 人 小 结 


第 五 草 对 象 创建 模式 


。 命名 空间 模式 
o 通用 的 命名 空间 函数 
e 声明 依赖 
o 私有 属性 和 方法 
o 私有 成 员 
o 特权 方法 
o 私有 化 失败 
o 对 象 直接 量 及 其 私有 成 员 
o 原型 及 其 私有 成 员 
o 将 私有 郊 数 暴露 为 共有 方法 
© 模块 模式 
o 暴露 模块 模式 
o 创建 构造 器 的 模块 
o 在 模块 中 引入 全 局 上 下 文 
沙 箱 模 式 
o 全 局 构造 函数 
o 添加 模块 
o 实现 这 个 构造 函数 
。 静态 成 员 
o 共有 静态 成 员 
o 私有 静态 成 员 
。 对 象 常量 
链 式 调用 模式 
o FE NTA A A AY A E 
method() 方法 
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第 六 章 代码 复 用 模式 


© 类 式 继承 vs 现代 继承 模式 
© 类 式 继承 的 期 望 结 果 
© 类 式 继承 1 一 一 默认 模式 
o 跟踪 原型 链 
o 这 种 模式 的 缺点 
© 类 式 继承 2 借用 构造 函数 
o 原型 链 
o 利用 借用 构造 函数 模式 实现 多 继承 
o 借用 构造 函数 的 利 与 产 











© 类 式 继承 3 借用 并 设置 原型 
。 类 式 继承 4 共享 原型 
© 类 式 继承 5 临时 构造 函数 





o 存储 父 类 

o 重 置 构造 函数 引用 
e Klass 
o 原型 继承 

o 讨论 

o 例外 的 ECMAScript 5 
。 通过 复制 属性 继承 
。 混 元 (Mix-ins) 
0 借用 方法 

o 例 : 从 数组 借用 

o 借用 并 绑 定 

o Function.prototype.bind() 
@ 小 结 


第 七 章 设计 模式 


e 单 例 
o 使 用 new 
o 将 实例 放 到 静态 属性 中 
o 将 实例 放 到 闭 包 中 
e 工厂 模式 
o 内 置 对 象 工厂 


大 大 


外 


。 使 用 列表 实现 
策略 模式 


(0) 


数据 验证 示例 


外 观 模式 
代理 模式 


o 


中 介 


is 
者 模式 


wie sea 
例 2 : 按键 游戏 


N= DOM 和 浏览 器 模式 


分 离 关 注 点 
DOM 脚本 编程 


(0) 


o 


事件 


o 


o 


DOM 访 问 
DOM 操 作 


事件 处 理 
事件 委托 


长 时 间 运 行 的 脚本 


o 


setTimeout() 


o Web Workers 


远程 


脚本 


o XMLHttpRequest 


o 


o 


JSONP 
Frame 和 |mage 加 载 指示 器 


部 署 JavaScript 


o 


o 


o 


o 


合并 脚本 
代码 减肥 和 压缩 
过 期 头 
使 用 CDN 


加 载 策略 


(0) 


(0) 


o 


Script 标签 的 位 置 

HTTP 分 块 

动态 播 入 Script 标签 非 阻 塞 载 入 脚本 
延迟 加 载 

按 需 加 载 


第 一 草 概述 


JavaScript 是 一 门 Web 开 发 语言 。 起 初 只 是 用 来 操作 网 页 中 为 数 不 多 的 元 素 (比如 图 片 和 表单 
域 ) ， 但 谁 也 没 想 到 这 门 语言 的 成 长 是 如 此 迅速 。 除 了 适用 于 客户 端 浏览 器 编程 ， 如 今 
JavaScript 程 序 可 以 运行 于 越 来 越 多 的 平台 之 上 。 你 可 以 用 它 来 进行 服务 器 端 开 发 (使 用 .Net 
或 Node.js) 、 桌 面 应 用 程序 开发 (运行 于 桌面 操作 系统 ) 、 以 及 应 用 程序 扩展 (Firefox 插 件 
或 者 Photoshop 扩 展 ) 、 移 动 终端 应 用 和 纯 命 令 行 的 批 处 理 脚本 。 


JavaScript 同 样 是 一 门 不 寻常 的 语言 。 它 没有 类 ， 许 多 场景 中 它 使 用 函数 作为 一 等 对 象 。 起 
初 ， 许 多 开发 者 认为 这 门 语 言 存 在 很 多 缺陷 ， 但 最 近 几 年 情况 发 生 了 微妙 的 变化 。 有 意思 的 
是 ， 有 一 些 老 牌 语言 比如 Java 和 PHP 也 已 经 开始 添加 诸如 闭 包 和 匿名 函数 等 新 特性 ， 而 闭 包 
和 匿名 函数 则 是 JavaScript 程 序 员 最 愿意 津津 乐 道 的 话题 。 


JavaScript 十 分 灵活 ， 可 以 用 你 所 熟悉 的 其 他 任何 编程 语言 的 编程 风格 来 写 JavaScript 程 序 。 
但 最 好 的 方式 还 是 拥抱 它 所 带 来 的 变化 、 学 习 它 所 特有 的 编程 模式 。 


RA 


对 “模式 ”的 广义 解释 是 “反复 发 生 的 事件 或 对 象 的 国定 用 法 ... 可 以 用 来 作为 重复 使 用 的 模板 或 
A” (http://en.wikipedia.org/wiki/Pattern ) ° 


在 软件 开发 领域 ， 模 式 是 指 常见 问题 的 通用 解决 方案 。 模 式 不 是 简单 的 代码 复制 和 粘贴 ， 而 
是 一 种 最 佳 实践 ， 一 种 高 级 抽象 ， 是 解决 某 一 类 问题 的 范本 。 


识 另 模式 非常 重要 ， 因 为 : 


o 这 些 模式 提供 了 经 过 论证 的 最 佳 实践 ， 它 可 以 帮助 我 们 更 好 的 编码 ， 避 免 重复 制造 车 
轮 。 

e 这 些 模式 提供 了 高 一 层 的 抽象 ， 某 个 时 间 段 内 大 脑 只 能 处 理 一 定 复杂 度 的 逻辑 ， 因 此 当 
你 处 理 更 繁琐 环 手 的 问题 时 ， 它 会 帮 你 理 清 头绪 ， 你 才 不 会 被 低级 的 琐事 阻碍 大 脑 思 
= 因为 所 有 的 细 枝 末节 都 可 以 被 归 类 和 切 分 成 不 同 的 块 (模式 ) 。 

© 这 些 模式 为 开发 者 和 团队 提供 了 沟通 的 渠道 ， 团 队 开发 者 之 间 往 往 是 异地 协作 ， 不 会 有 

经 常 面 对 面 的 沟通 机 会 。 简 单 的 代码 编写 技巧 和 技术 问题 处 理 方 式 的 约定 (代码 注释 ) 
使 得 开发 者 之 间 的 交流 更 加 通畅 。 例 如 ，"“ 函 数 立 即 执行 "用 大 白话 表述 成 “你 写 好 一 个 函 

数 后 ， 在 函数 的 结束 花 括 号 的 后 面 添加 一 对 括号 ， 这 样 能 在 定义 函数 结束 后 马上 执行 这 
个 函数 ”( 我 的 天 ) 。 


本 书 将 着 重 讨论 下 面 这 三 种 模式 : 


e 设计 模式 (Design patterns ) 
。 编码 模式 (Coding patterns ) 


e 反 模 式 〈Antipatterns ) 


设计 模式 最 初 的 定义 是 来 自 于 "GoF”( 四 人 组 ，94 年 版 "设计 模式 "的 四 个 作者 ) 的 一 本 书 ， 这 
本 书 在 1994 年 出 版 ， 书 名 全 称 是 “设计 模式 : 可 复 用 面向 对 象 软件 基础 "。 书 中 列举 了 一 些 重要 
的 设计 模式 ， 比 如 单 体 、 工 厂 、 装 饰 者 、 观 察 者 等 等 。 但 适用 于 JavaScript 的 设计 模式 并 不 

多 ， 尽 管 设 计 模 式 是 脱离 某 种 语言 而 存在 的 ， 但 通常 会 以 某 种 语言 做 范例 来 讲解 设计 模式 ， 
这 些 语言 多 是 强 类 型 语言 ， 比 如 C++ 和 Java。 有 时 直接 将 其 应 用 于 弱 类 型 的 动态 语言 比如 
JavaScript 又 显得 捉襟见肘 。 通 常 这 些 设 计 模 式 都 是 基于 语言 的 强 类 型 特性 以 及 类 的 继承 。 而 
JavaScript 则 需要 某 种 轻型 的 替代 方案 。 本 书 在 第 七 章 将 讨论 基于 JavaScript 实 现 的 一 些 设计 
模式 。 


编码 模式 更 有 趣 一 些 。 它 们 是 JavaScript 特 有 的 模式 和 最 佳 实践 ， 它 利用 了 这 门 语 言 独 有 的 一 
些 特 性 ， 比 如 对 函数 的 灵活 运用 ，JavaScript 编 码 模式 是 本 书 所 要 讨论 的 重点 内 容 。 


本 书 中 你 会 偶尔 读 到 一 点 关于 “ 反 模 式 " 的 内 容 ， 顾 名 思 义 ， 反 模式 具有 某 些 负 作用 甚至 破坏 
性 ， 书 中 会 顺便 一 提 。 反 模式 并 不 是 bug 或 代码 错误 ， 它 只 是 一 种 处 理 问 题 的 对 策 ， 只 是 这 种 
对 策 带 来 的 麻烦 远 超 过 他 们 解决 的 问题 。 在 示例 代码 中 我 们 会 对 反 模 式 做 明显 的 标注 。 


JavaScript : 概念 


在 正式 的 讨论 之 前 ， 应 当先 理 清 楚 JavaScript 中 的 一 些 重要 的 概念 ， 这 些 概念 在 后 续 章 节 中 会 
经 常 碰 到 ， 我 们 先 来 快速 过 一 下 。 


面向 对 象 


JavaScript 是 一 门面 向 对 象 的 编程 语言 ， 对 于 那些 仓促 学 习 JavaScript 并 很 快 丢掉 它 的 开发 者 
来 说 ， 这 的 确 有 点 让 人 感到 意外 。 你 所 能 接触 到 的 任何 JavaScript 代 码 片段 都 可 以 作为 对 象 。 
只 有 五 类 原始 类 型 不 是 对 象 ， 它 们 是 数字 、 字 符 囊 、 布 尔 值 、null 和 undefined， 前 三 种 类 型 
都 有 与 之 对 应 的 包装 对 象 (下 一 章 会 讲 到 ) 。 数 字 、 字 符 串 和 布尔 值 可 以 轻易 的 转换 为 对 象 
类 型 ， 可 以 通过 手动 转换 ， 也 可 以 利用 JavaScript 解 析 器 进行 自动 转换 。 


函数 也 是 对 象 ， 也 可 以 拥有 属性 和 方法 。 


在 任何 语言 中 ， 最 简单 的 操作 英 过 于 定义 变量 。 那 么 ， 在 JavaScript 中 定义 变量 的 时 候 ， 其 实 
也 在 和 对 象 打 交道 。 首 先 ， 变 量 自动 变 为 一 个 被 称 作 “活动 对 象 ”的 内 置 对 象 的 属性 (如果 是 全 
局 变量 的 话 ， 就 变 为 全 局 对 象 的 属性 ) 。 第 二 ， 这 个 变量 实际 上 也 是 “ 伪 对 象 *， 因 为 它 有 自己 
的 属性 (属性 特性 ) ， 用 以 表示 变量 是 否 可 以 被 修改 、 删 除 或 在 for-in 循 环 中 枚 举 。 这 些 特性 
并 未 在 ECMAScript3 中 作 规 定 ， 而 ECMAScript5 中 提供 了 一 组 可 以 修改 这 些 特性 的 方法 。 
那么 ， 到 底 什 么 是 对 象 ? 对 象 能 作 这 么 多 事情 ， 那 它们 一 定 非 常 特别 。 实 际 上 ， 对 象 是 及 其 
简单 的 。 对 象 只 是 很 多 属性 的 集合 ， 一 个 名 值 对 的 列表 (在 其 他 语言 中 可 能 被 称 作 关 联 数 
组 ) 9 RI BMW Te BAR (AAIR) ， 这 种 函数 我 们 称 为 “方法 ”。 


关于 对 象 还 需要 了 解 ， 我 们 可 以 随时 随地 修改 你 创建 的 对 象 (当然 ，ECMAScript5 中 提供 了 
可 阻止 这 些 修改 的 AP|) 。 得 到 一 个 对 象 后 ， 你 可 以 给 他 添加 、 删 除 或 更 新 成 员 。 如 果 你 关心 
私有 成 员 和 访问 控制 ， 本 书 中 我 们 也 会 讲 到 相关 的 编程 模式 。 


最 后 一 个 需要 注意 的 是 ， 对 象 有 两 大 类 : 
e 本 地 对 象 (Native) : 由 ECMAScript 标 准 规范 定义 的 对 象 
e 宿主 对 象 (Host) : 由 宿主 环境 创建 的 对 象 (比如 浏览 器 环境 ) 
本 地 对 象 也 可 以 被 归 类 为 内 置 对 象 (比如 Array，Date ) 或 自 定 义 对 象 (var 0 = 人 人) ° 


宿主 对 象 包含 Window 和 所 有 DOM 对 象 。 如 果 你 想 知道 你 是 否 在 使 用 宿主 对 象 ， 将 你 的 代码 迁 
移 到 一 个 非 浏览 器 环境 中 运行 一 下 ， 如 果 正 常 工作 ， 那 么 你 的 代码 只 用 到 了 本 地 对 象 。 


无 类 


在 本 书 中 的 许多 场合 都 会 反复 碰 到 这 个 概念 。JavaScript 中 没有 类 ， 对 于 其 他 语言 的 编程 老手 
来 说 这 个 观念 非常 新 颍 ， 需 要 反复 的 琢磨 和 重新 学 习 才 能 理解 JavaScript 只 能 处 理 对 象 的 观 


没有 类 ， 你 的 代码 变 得 更 小 巧 ， 因 为 你 不 必 使 用 类 去 创建 对 象 ， 看 一 下 Java 风 格 的 对 象 创 
建 : 


// Java object creation 
Hello00 hello_oo = new Hello00(); 


为 了 创建 一 个 简单 的 对 象 ， 同 样 一 件 事情 却 重复 做 了 三 遍 ， 这 让 这 段 代码 看 起 来 很 " 重 "。 而 大 
多 数 情况 下 ， 我 们 只 想 让 我 们 的 对 象 保持 简单 。 


在 JavaScript 中 ， 你 需要 一 个 对 象 ， 就 随手 创建 一 个 空 对 象 ， 然 后 开始 给 这 个 对 象 添加 有 趣 的 
成 员 。 你 可 以 给 它 添加 原始 值 、 函 数 或 其 他 对 象 作为 这 个 对 象 属性 。" 空 ?对象 并 不 是 摊 正 的 
空 ， 对 象 中 存在 一 些 内 置 的 属性 ， 但 并 没有 “ 自 有 属性 ”。 在 下 一 章 里 我 们 对 此 作 详 细 讨 论 。 


“GoF" 的 书 中 提 到 一 条 通用 规则 ，“ 组 合 优 于 继承 "， 也 就 是 说 ， 如 果 你 手头 有 创建 这 个 对 象 所 
需 的 资源 ， 更 推荐 直接 将 这 些 资 源 组 装 成 你 所 需 的 对 象 ， 而 不 推荐 先 作 分 类 再 创建 链 式 父子 
继承 的 方式 来 创建 对 象 。 在 JavaScript 中 ， 这 条 规则 非常 容易 遵守 ， 因 为 JavaScript 中 没有 
类 ， 而 且 对 象 组 装 无 处 不 在 。 


原型 


JavaScript 中 的 确 有 继承 ， 尽 管 这 只 是 一 种 代码 重用 的 方式 (本 书 有 专门 的 一 章 来 讨论 代码 重 
用 ) 。 继 承 可 以 有 多 种 方式 ， 最 常用 的 方式 就 是 利用 原型 。 原 型 (prototype) 是 一 个 普通 的 
对 象 ， 你 所 创建 的 每 一 个 函数 会 自动 带 有 prototype 属 性 ， 这 个 属性 指向 一 个 空 对 象 ， 这 个 空 


对 象 包含 一 个 constructor 属 性 ， 它 指向 你 新 建 的 函数 而 不 是 内 置 的 Object()， 除 此 之 外 它 和 通 
过 对 象 直接 量 或 Object() 构 造 函 数 创建 的 对 象 没什么 两 样 。 你 可 以 给 它 添加 新 的 成 员 ， 这 些 成 
员 可 以 被 其 他 的 对 象 继承 ， 并 当 作 其 他 对 象 的 自 有 属性 来 使 用 。 


我 们 会 详细 讨论 JavaScript 中 的 继承 ， 现 在 只 要 记 住 : 原型 是 一 个 对 象 (不 是 类 或 者 其 他 什么 
特别 的 东西 ) ， 每 个 函数 都 有 一 个 prototype 属 性 。 


运行 环境 


JavaScript 程 序 需要 一 个 运行 环境 。 一 个 天 然 的 运行 环境 就 是 浏览 器 ， 但 这 绝 不 是 唯一 的 运行 
环境 。 本 书 所 讨论 的 编程 模式 更 多 的 和 JavaScript 语 言 核 心 (ECMAScript) 相关 ， 因 此 这 些 
编程 模式 是 环境 无 关 的 。 有 两 个 例外 : 


。 第 八 章 ， 这 一 章 专门 讲述 浏览 器 相关 的 模式 
。 其 他 一 些 展示 模式 的 实际 应 用 的 例子 


运行 环境 会 提供 自己 的 笨 主 对 象 ， 这 些 和 宿主 对 象 并 未 在 ECMAScript 标 准 中 定义 ， 它 们 的 行为 
也 是 不 可 预知 的 。 


ECMAScript 5 


JavaScript 语 言 的 核心 部 分 (不 包含 DOM、BOM 和 人 外 部 宿主 对 象 ) 是 基于 ECMAScript 标 准 
(简称 为 ES) 来 实现 的 。 其 中 第 三 版 是 在 1999 年 正式 颁布 的 ， 目 前 大 多 数 浏览 器 都 实现 了 这 
个 版 本 。 第 四 版 已 经 废弃 了 。 第 三 版 颁布 后 十 年 ，2009 年 十 二 月 ， 第 五 版 才 正 式 颁 布 。 


第 五 版 增加 了 新 的 内 置 对 象 、 方 法 和 属性 ， 但 最 重要 的 增加 内 容 是 所 谓 的 严格 模式 (strict 
mode) ， 这 个 模式 移 除 了 某 些 语言 特性 ， 让 程序 变 得 简单 且 健 壮 。 比 如 ，with 语 句 的 使 用 已 
经 争论 了 很 多 年 ， 如 今 ， 在 ECMAScript5 严 格 模式 中 使 用 with 则 会 报错 ， 而 在 非 严 格 模式 中 则 
是 ok 的 。 我 们 通过 一 个 指令 来 激活 严格 模式 ， 这 个 指令 在 旧版 本 的 语言 实现 中 被 忽略 。 也 就 
是 说 ， 严 格 模式 是 向 下 兼容 的 ， 因 为 在 不 支持 严格 模式 的 旧 浏 览 器 中 也 不 会 报错 。 


对 于 每 一 个 作用 域 ( 包括 函数 作用 域 、 全 局 作用 域 或 在 eval() 参 数字 符 串 的 开始 部 分 ) ， 你 可 
以 使 用 这 种 代码 来 激活 严格 模式 : 


function my() { 
"use strict"; 
// rest of the function... 


} 
这 样 就 激活 了 严格 模式 ， 函 数 的 执行 则 会 被 限制 在 语言 的 严格 子 集 的 范围 内 。 对 于 昌 浏 览 器 
来 说 ， 这 句 话 只 是 一 个 没有 赋值 给 任何 变量 的 字符 串 ， 因 此 不 会 报错 。 


按照 语言 的 发 展 计划 ， 未 来 将 会 只 保留 “严格 模式 ”。 因 此 ， 现 在 的 ES5 只 是 一 个 过 渡 版 本 ， 它 
鼓励 开发 者 使 用 严格 模式 ， 而 非 强 制 。 


本 书 不 会 讨论 ES5 新 增 特性 相关 的 模式 ， 因 为 在 本 书 截稿 时 并 没有 任何 浏览 器 实现 了 ES5， 但 
本 书 的 示例 代码 通过 一 些 技巧 鼓励 开发 者 向 新 标准 转变 : 


© 确保 所 提供 的 示例 代码 在 严格 模式 下 不 包 错 
e 避免 使 用 并 明确 指出 育 用 的 构造 函数 相关 的 属性 和 方法 ， 比 如 arguments.callee 
e 针对 ES5 中 的 内 置 模式 比如 Object.create()， 在 ES3 中 实现 等 价 的 模式 


JSLint 


JavaScript 是 一 种 解释 型 语言 ， 它 没有 静态 编译 时 的 代码 检查 ， 所 以 很 可 能 将 带 有 简单 类 型 错 
误 的 破碎 的 程序 部 署 到 线 上 ， 而 且 往 往 意识 不 到 这 些 错 误 的 存在 。 这 时 我 们 就 需要 JSLint 的 帮 
助 。 


JSLint (http://jslint.com ) 是 一 个 JavaScript 代 码 质量 检测 工具 ， 它 的 作者 是 Douglas 
Crockford，JSLint 会 对 代码 作 扫 描 ， 并 针对 潜在 的 问题 报 出 警告 。 笔 者 强烈 推荐 你 在 执行 代 
码 前 先 通 过 JSlint 作 检查 。 作 者 给 出 了 警告 : 这 个 工具 可 能 “会 让 你 不 严 "， 但 仅仅 是 在 开始 使 
用 它 的 时 候 不 更 一 下 而 已 。 你 会 很 快 从 你 的 错误 中 吸取 教训 ， 并 学 习 这 些 成 为 一 名 专业 的 
JavaScript 程 序 员 应 当 必 备 的 好 习惯 。 让 你 的 代码 通过 JSLint 的 检查 ， 这 会 让 你 对 自己 的 代码 
更 加 有 自信 ， 因 为 你 不 用 再 去 担心 代码 中 茶 个 不 起 眼 的 地 方 丢失 了 各 号 或 者 有 某 种 难以 察觉 


的 语法 错误 。 


当 开 始 下 一 章 的 学 习 时 ， 你 将 发 现 JSLint 会 被 多 次 提 到 。 本 书 中 除了 讲解 反 模 式 的 示例 代码 外 
(有 清楚 的 注释 说 明 ) 、 所 有 示例 代码 均 通过 了 JSLint 的 检查 (使 用 JSLint 的 默认 设置 ) © 


控制 全 工具 


console 对 象 在 本 书 中 非常 常见 。 这 个 对 象 并 不 是 语言 的 一 部 分 ， 而 是 运行 环境 的 一 部 分 ， 目 
前 大 多 数 浏览 器 也 都 实现 了 这 个 对 象 。 比 如 在 Firefox 中 ， 它 是 通过 Firebug 扩 展 引 入 进来 的 。 
Firebug 控 制 台 工具 包含 UI 操 作 界 面 ， 可 以 让 你 快速 输入 并 测试 JavaScript 代 码 片 段 ， 同 样 用 
它 可 以 调试 当前 打开 的 页 面 (图 1-1) 。 在 这 里 强烈 推荐 使 用 它 来 辅助 学 习 。 在 Webkit 核 心 的 
浏览 器 (Safari 和 Chrome) 也 提供 了 类 似 的 工具 ， 可 以 监控 页 面 情况 ，IE 从 版 本 8 开始 也 提供 
了 开发 者 工具 。 


本 书 中 大 多 数 代 码 都 使 用 console 对 象 来 输出 结果 ， 而 没有 使 用 alert() 或 者 刷新 当前 页 面 。 
为 用 这 种 方法 输出 结果 实在 太 简单 了 。 


图 1-1 使 用 Firebug 控 制 台 工具 


JavaScript 模式 


Firebug — Index of / 


| Console v | HTML CSS Script DOM Net P! 


lẹ : Clear Persist Profile 

>>> console.log("test", 1, {}, [1,2,3]); 

test 1 Object { } [1, 2, 3] 

>>> console.dir(fone: 1, two: {three: 3}}); 
one i 

Y two Object { three=3 } 

three 3 

>>> for (var i = 0; i <= 50; i += 10) { console.Llog(i); } 

0 

10 

20 

30 

40 





我 们 经 常 使 用 log() 方 法 ， 它 将 传 入 的 参数 在 控制 台 输出 ， 有 时 会 用 到 dir()， 用 以 将 传 入 的 对 象 
属性 枚 举 出 来 ， 这 里 是 一 个 例子 : 


console.log("test", 1, {}, [1,2,3]); 
console.dir({one: 1, two: {three: 3}}); 


当 你 在 控制 台 输 入 内 容 时 ， 则 不 必 使 用 console.log()。 为 了 避免 混乱 ， 有 些 代码 片段 仍然 使 用 
console.log() 作 输出 ， 并 假设 所 有 的 代码 片段 都 使 用 控制 台 来 作 检测 : 


window.name === window['name']; // true 


这 和 下 面 这 种 用 法 意思 一 样 : 


console. log(window.name === window['name']); 


这 段 代码 在 控制 台中 输出 为 true © 
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第 二 章 高 质量 JavaScript 基 本 要 点 


本 章 将 对 一 些 实质 内 容 展开 讨论 ， 这 些 内 容 包括 最 佳 实践 、 模 式 和 编写 高 质量 JavaScript 代 码 
的 习惯 ， 比 如 避免 全 局 变量 、 使 用 单 Var 声明 、 循 环 中 的 length 预 缓存 、 遵 守 编码 约定 等 等 。 
本 章 还 包括 一 些 非 必要 的 编程 习惯 ， 但 更 多 的 关注 点 将 放 在 总 体 的 代码 创建 过 程 上 ， 包 括 扎 
写 API 文 档 、 组 织 相互 评审 以 及 使 用 JSLint 。 这 些 习 惯 和 最 佳 实践 可 以 帮助 你 写 出 更 好 的 、 更 
易 读 的 和 可 维护 的 代码 ， 当 几 个 月 后 或 数 年 后 再 重读 你 的 代码 时 ， 你 就 会 深 有 体会 了 。 


编写 可 维护 的 代码 


修复 软件 bug 成 本 很 高 ， 而 且 随 着 时 间 的 推移 ， 它 们 造成 的 损失 也 越 来 越 大 ， 特 别 是 在 已 经 打 
包 发 布 了 的 软件 发 现 了 bug 的 时 候 。 当 然 最 好 是 发 现 bug 立 刻 解决 掉 ， 但 前 提 是 你 对 你 的 代码 
依然 很 熟悉 ， 否 则 当 你 转身 投入 到 另外 一 个 项 目的 开发 中 后 ， 根 本 不 记得 当初 代码 的 模样 

了 。 过 了 一 段 时 间 后 你 再 去 阅读 当初 的 代码 你 需要 : 


e@ 时 间 来 重新 学 习 并 理解 问题 
oe 时 间 去 理解 问题 相关 的 代码 


对 大 型 项 目 或 者 公司 来 说 还 有 一 个 不 得 不 考虑 的 问题 ， 就 是 解决 这 个 bug 的 人 和 市 造 这 个 bug 
的 人 往往 不 是 同一 个 人 。 因 此 减少 理解 代码 所 需 的 时 间 成 本 就 显得 非常 重要 ， 不 管 是 隔 了 很 
长 时 间 重 读 自己 的 代码 还 是 阅读 团队 内 其 他 人 的 代码 。 这 对 于 公司 的 利益 底线 和 工程 师 的 幸 
福 指数 同样 重要 ， 因 为 每 个 人 都 宁愿 去 开发 新 的 项 目 而 不 愿 花 很 多 时 间 和 精力 去 维护 上 昌 代 
码 。 


ee aay 人 遍 现 得 是 ， 在 读 代 码 上 花 的 时 间 要 远 远 超过 写 代 码 的 时 间 。 常 常 当 
你 专注 于 某 个 问题 的 时 候 ， 你 会 坐 下 来 用 一 下 午 的 时 间 产 出 大 量 的 代码 。 当 时 的 场景 下 代码 
是 可 以 正常 运行 的 ， 但 当 应 用 趋 于 成 熟 ， 会 有 很 多 因素 促使 你 重读 代码 、 改 进 代码 或 对 代码 

做 微调 。 比 如 : 


e ALT bug 

。 需要 给 应 用 添加 新 需求 

e 需要 将 应 用 迁移 到 新 的 平台 中 运行 (比如 当 市 场 中 出 现 了 新 的 浏览 器 时 ) 

e 代码 重 构 

o 由 于 架构 更 改 或 者 更 换 另 一 种 语言 导致 代码 重 写 
这 些 不 确定 因素 带 来 的 后 果 是 ， 少 数 人 花 几 小 时 写 的 代码 需要 很 多 人 花 几 个 星期 去 阅读 它 。 
因此 ， 创 建 可 维护 的 代码 对 于 一 个 成 功 的 应 用 来 说 至 关 重 要 。 
可 维护 的 代码 意味 着 代码 是 : 


。 可 读 的 


e 一 致 的 

e 可 预测 的 

© 看 起 来 像 是 同一 个 人 写 的 
© 有 文档 的 


本 章 接 下 来 的 部 分 会 对 这 几 点 深入 讲解 。 


减少 全 局 对 象 


JavaScript 使 用 函数 来 管理 作用 域 ， 在 一 个 函数 内 定义 的 变量 称 作 “局 部 变量 "， 局 部 变量 在 函 
数 外 部 是 不 可 见 的 。 另 一 方面 ，“ 全 局 变量 "是 不 在 任何 函数 体内 部 声明 的 变量 ， 或 者 是 直接 使 
用 而 未 明 的 变量 。 


每 一 个 JavaScript 运 行 环境 都 有 一 个 “全 局 对 象 "”， 不 在 任何 函数 体内 使 用 this 就 可 以 获得 对 这 个 
全 局 对 象 的 引用 。 你 所 创建 的 每 一 个 全 局 变量 都 是 这 个 全 局 对 象 的 属性 。 为 了 方便 起 见 ， 济 
览 器 都 会 额外 提供 一 个 全 局 对 象 的 属性 window， (常常 ) 用 以 指向 全 局 对 象 本 身 。 下 面 的 示 
例 代 码 中 展示 了 如 何在 浏览 器 中 创建 或 访问 全 局 变量 : 


myglobal = "hello"; // antipattern 
console.log(myglobal); // "hello" 
console.log(window.myglobal); // "hello" 
console.log(window["myglobal"]); // "hello" 
console.log(this.myglobal); // "hello" 


全 局 对 象 带 来 的 困扰 


全 局 变量 的 问题 是 ， 它 们 在 JavaScript 代 码 执行 期 间或 者 整个 web 页面 中 始终 是 可 见 的 。 它 们 
存在 于 同一 个 命名 空间 中 ， 因 此 命名 冲突 的 情况 时 有 发 生 ， 举 竟 在 应 用 程序 的 不 同 模块 中 ， 
经 常会 出 于 某 种 目的 定义 相同 的 全 局 变量 。 


同样 ， 常 常 网 页 中 所 虞 入 的 代码 并 不 是 这 个 网 页 的 开发 者 所 写 ， 上 比如 : 


。 网 页 中 使 用 了 第 三 方 的 JavaScript 库 

e 网 页 中 使 用 了 广告 代码 

。 网 页 中 使 用 了 用 以 分 析 流 量 和 点 击 率 的 第 三 方 统计 代码 
e 网 页 中 使 用 了 很 多 组 件 ， 挂 件 和 按钮 等 等 


假设 某 一 段 第 三 方 提供 的 脚本 定义 了 一 个 全 局 变量 result。 随 后 你 在 自己 写 的 某 个 函数 中 也 定 
义 了 一 个 全 局 变量 result。 这 时 ， 第 二 个 变量 就 会 履 盖 第 一 个 ， 这 时 就 会 导致 第 三 方 脚本 停止 
工作 。 


因此 ， 为 了 让 你 的 脚本 和 这 个 页 面 中 的 其 他 脚本 和 谐 相 处 ， 要 尽 可 能 少 的 使 用 全 局 变量 ， 这 


一 点 非常 重要 。 本 书 随后 的 章节 中 会 讲 到 一 些 减少 全 局 变量 的 技巧 和 策略 ， 比 如 使 用 命名 室 
间或 者 立即 执行 的 匿名 函数 等 ， 但 减少 全 局 变量 最 有 效 的 方法 是 坚持 使 用 var 来 声明 变量 。 


由 于 JavaScript 的 特点 ， 我 们 经 常 有 意 无 意 的 创建 全 局 变量 ， 毕 竟 在 JavaScript 中 创建 全 局 变 
量 实在 太 简 音 了。 首先 ， 你 可 以 不 声明 而 直接 使 用 变量 ， 再 者 ，JavaScirpt 中 具有 " 隐 式 全 局 
对 象 ”的 概念 ， 也 就 是 说 任何 不 通过 var 声明 (译注 : 在 JavaScript1.7 及 以 后 的 版 本 中 ， 可 以 通 
过 |et 来 声明 块 级 作用 域 的 变量 ) 的 变量 都 会 成 为 全 局 对 象 的 一 个 属性 (可 以 把 它们 当 作 全 局 
EE) 。 看 一 下 下 面 这 段 代码 : 
function sum(x, y) { 
// antipattern: implied global 


result = x + y; 
return result; 


这 段 代 码 中 ， 我 们 直接 使 用 了 result 而 没有 事先 声明 它 。 这 段 代 码 是 能 够 正常 工作 的 ， 但 在 调 
用 这 个 方法 之 后 ， 会 产生 一 个 全 局 变量 result， 这 会 带 来 其 他 问题 。 


解决 办 法 是 ， 总 是 使 用 var 来 声明 变量 ， 下 面 代 码 就 是 改进 了 的 Sum() 有 函数 : 


function sum(x, y) { 
var result = x + y; 
return result; 


这 里 我 们 要 注意 一 种 反 模 式 ， 就 是 在 var 声 明 中 通过 链 式 赋值 的 方法 创建 全 局 变量 。 在 下 面 这 
个 代码 片段 中 ，a 是 局 部 变量 ， 但 b 是 全 局 变量 ， 而 作者 的 意图 显然 不 是 如 此 : 


// antipattern, do not use 
function foo() { 

var a=b=0; 

Via 


为 什么 会 这 样 ? 因为 这 里 的 计算 顺序 是 从 右 至 左 的 。 首 先 计算 表达 式 b=0， 这 里 的 b 是 未 声明 
的 ， 这 个 表达 式 的 值 是 0， 然 后 通过 var 创 建 了 局 部 变量 a， 并 赋值 为 0。 换 言 之 ， 可 以 等 价 的 
将 代码 写成 这 样 : 


var a = (b = 0); 
如 果 变 量 b 已 经 被 声明 ， 这 种 链 式 赋值 的 写法 是 ok 的 ， 不 会 意外 的 创建 全 局 变量 ， 比 如 : 


function foo() { 
var a, b; 
VE cosets 
a= b = 0; // both local 


避免 使 用 全 局 变量 的 另 一 个 原因 是 出 于 可 移植 性 考虑 的 ， 如 果 你 希望 将 你 的 代码 运行 于 
不 同 的 平台 环境 (宿主 ) ， 使 用 全 局 变量 则 非常 危险 。 很 有 可 能 你 无 意 间 创 建 的 茶 个 全 
局 变量 在 当前 的 平台 环境 中 是 不 存在 的 ， 你 认为 可 以 安全 的 使 用 ， 而 在 其 他 的 环境 中 却 
是 存在 的 。 


忘记 Var 时 的 副作用 


隐 式 的 全 局 变量 和 显 式 定义 的 全 局 变量 之 间 有 着 细微 的 差别 ， 差 别 在 于 通过 delete 来 删除 它们 
的 时 候 表现 不 一 致 。 


e 通过 var 创 建 的 全 局 变量 (在 任何 函数 体 之 外 创建 的 变量 ) 不 能 被 删除 。 
© 没有 用 Var 创建 的 隐 式 全 局 变量 (不 考虑 函数 内 的 情况 ) 可 以 被 删除 。 


也 就 是 说 ， 隐 式 全 局 变量 并 不 算是 丨 正 的 变量 ， 但 他 们 是 全 局 对 象 的 属性 成 员 。 属 性 是 可 以 
通过 delete 运 算 符 删除 的 ， 而 变量 不 可 以 被 删除 : 


(译注 : 在 浏览 器 环境 中 ， 所 有 JavaScript 代码 都 是 在 window 作用 域内 的 ， 所 以 在 这 
种 情况 下 ， 我 们 所 说 的 全 局 变量 其 实 都 是 window 下 的 一 个 属性 ， 故 可 以 用 delete 4 
除 ， 但 在 如 nodejs A gjs 等 非 浏 览 器 环境 下 ， 显 式 声明 的 全 局 变量 无 法 用 delete Ml 


>) 


// define three globals 
var global_var = 1; 
global_novar = 2; // antipattern 
(function () { 
global_fromfunc = 3; // antipattern 


}()); 


// attempt to delete 

delete global var; // false 
delete global novar; // true 
delete global fromfunc; // true 


// test the deletion 
typeof global var; // "number" 


typeof global novar; // "undefined" 
typeof global fromfunc; // "undefined" 


在 ES5 严 格 模式 中 ， 给 未 声明 的 变量 赋值 会 报错 〈 比 如 这 段 代码 中 提 到 的 两 个 反 模 式 ) © 


访问 全 局 对 象 


在 浏览 器 中 ， 我 们 可 以 随时 随地 通过 Window 属 性 来 访问 全 局 对 象 (除非 你 定义 了 一 个 名 叫 
Window 的 局 部 变量 ) 。 但 换 一 个 运行 环境 这 个 方便 的 window 可 能 就 换 成 了 别 的 名 字 (BIR 
本 就 被 禁止 访问 全 局 对 象 了 ) 。 如 果 不 想 通过 这 种 写 死 window 的 方式 来 得 到 全 局 变量 ， 有 一 
个 办 法 ， 你 可 以 在 任意 层次 上风 套 的 函数 作用 域内 执行 : 


var global = (function () { 
return this; 


}()); 


这 种 方式 总 是 可 以 得 到 全 局 对 痊 ， 因 为 在 被 当 作 兄 数 执行 的 函数 体内 (而 不 是 被 当 作 构造 函 
数 执行 的 函数 体内 ) ，this 总 是 指向 全 局 对 象 。 但 这 种 情况 在 ECMAScript5 的 严格 模式 中 行 不 
通 $ 因此 在 严格 模式 中 你 不 得 不 寻求 其 他 的 替代 方案 o 比如 ， 如 果 你 在 开发 一 个 库 你 会 将 
你 的 代码 包装 在 一 个 立即 执行 的 匿名 函数 中 (在 第 四 章 会 讲 到 ) ， 然 后 从 全 局 作用 域 中 给 这 
MEZ BBA A— S48 this) BA o 


单 var 模式 
在 函数 的 顶部 使 用 一 个 单独 的 var 语 句 是 非常 推荐 的 一 种 模式 ， 它 有 如 下 一 些 好 处 : 


。 在 同一 个 位 置 可 以 查找 到 函数 所 需 的 所 有 变量 

。 避免 当 在 变量 声明 之 前 使 用 这 个 变量 时 产生 的 逻辑 错误 (参照 下 一 小 节 “ 声 明 提 前 : 
的 var 带 来 的 问题 ”) 

© 提醒 你 不 要 忘记 声明 变量 ， 顺 便 减 少 潜在 的 全 局 变量 

o 代码 量 更 少 (输入 更 少 且 更 易 做 代码 优化 ) 


y 
oe 


单 var 模 式 看 起 来 像 这样 : 


function func() { 
var a = 1, 
b = 2, 
sum = a + b, 
myobject = {}, 
1, 


j; 
// function body... 
} 


你 可 以 使 用 一 个 var 语 名 来 声明 多 个 变量 ， 变 量 之 间 用 过 号 分 隔 。 也 可 以 在 这 个 语句 中 加 入 变 
量 的 初始 化 ， 这 是 一 个 非常 好 的 实践 。 这 种 方式 可 以 避免 逻辑 错误 (所 有 未 初始 化 的 变量 都 
被 声明 了 ， 且 值 为 undefined) 并 增加 了 代码 的 可 读 性 。 过 段 时 间 后 再 看 这 段 代 码 ， 你 会 体会 
到 声明 不 同类 型 变量 的 惯用 名 称 ， 比 如 ， 你 一 眼 就 可 看 出 某 个 变量 是 对 象 还 是 整数 。 


你 可 以 在 声明 变量 时 多 做 一 些 额外 的 工作 ， 上 比如 在 这 个 例子 中 就 写 了 sum=a+b 这 种 代码 。 另 
一 个 例子 就 是 当代 码 中 用 到 对 DOM 元 素 时 ， 你 可 以 把 对 DOM 的 引用 赋值 给 一 些 变量 ， 这 一 步 
就 可 以 放 在 一 个 单独 的 声明 语句 中 ， 比 如 下 面 这 段 代码 : 


function updateElement() { 
var el = document.getElementById("result"), 
style = el.style; 
// do something with el and style... 
} 


声明 提前 : 分 散 的 var 带 来 的 问题 


gave Sorin 中 是 允许 在 函数 的 任意 地 方 写 任意 多 个 var 语 名 的 ， 其 实 相 当 于 在 函数 体 顶 部 声明 
变量 ， 这 种 现象 被 称 为 “变量 提前 ”， 当 你 在 声明 之 前 使 用 这 个 变量 时 ， 可 能 会 造成 逻辑 错误 。 
对 于 JavaScript 来 说 ， 一 旦 在 某 个 作用 域 (同一 个 函数 内 ) 里 声明 了 一 个 变量 ， 这 个 变量 在 整 
个 作用 域内 都 是 存在 的 ， 包 括 在 var 声 明 语 名 之 前 。 看 一 下 这 个 例子 : 


// antipattern 
myname = "global"; // global variable 
function func() { 
alert(myname); // "undefined" 
var myname = "local"; 
alert(myname); // "local" 


} 
func(); 


这 个 例子 中 ， 你 可 能 期 望 第 一 个 alert() 弹 出 “global”， 第 二 个 alert() 弹 出 “local”。 这 种 结果 看 起 
来 是 合乎 常理 的 ， 因 为 在 第 一 个 alert 执 行 时 ，myname 还 没有 声明 ， 这 时 就 应 该 “寻找 "全 局 变 
量 中 的 myname。 但 实际 情况 并 不 是 这 样 ， 第 一 个 alert 弹 出 “undefined”， 因 为 myname 已 经 在 
函数 内 有 声明 了 (尽管 声明 语句 在 后 面 ) 。 所 有 的 变量 声明 都 提前 到 了 函数 的 顶部 。 因 此 ， 
为 了 避免 类 似 带 有 “上层 义 " 的 程序 逻辑 ， 最 好 在 使 用 之 前 一 起 声明 它们 。 


上 一 个 代码 片段 等 价 于 下 面 这 个 代码 片段 : 


myname = "global"; // global variable 
function func() { 
var myname; // same as -> var myname = undefined; 
alert(myname); // "undefined" 
myname = "local"; 
alert(myname); // "local" 


} 
func(); 


这 里 有 必要 对 "变量 提前 " 作 进 一 步 补充 ， 实 际 上 从 JavaScript 引 擎 的 工作 机 制 上 看 ， 这 个 

过 程 稍微 有 点 复杂 。 代 码 处 理 经 过 了 两 个 阶段 ， 第 一 阶段 是 创建 变量 、 函 数 和 参数 ， 这 
一 步 是 预 编 译 的 过 程 ， 它 会 扫描 整 段 代码 的 上 下 文 。 第 二 阶段 是 代码 的 运行 ， 这 一 阶段 
将 创建 函数 表达 式 和 一 些 非法 的 标识 符 (未 声明 的 变量 ) 。 从 实用 性 角度 来 讲 ， 我 们 更 
思 意 将 这 两 个 阶段 归 成 一 个 概念 “变量 提前 ”， 尽 管 这 个 概念 并 没有 在 ECMAScript 标 准 中 
定义 ， 但 我 们 常常 用 它 来 解释 预 编 译 的 行为 过 程 。 





for 46 I5 


在 for 循 环 中 ， 可 以 对 数组 或 类 似 数组 的 对 象 (比如 arguments 和 HTMLCollection 对 象 ) 作 遍 
历 ， 最 普通 的 for 循 环 模式 形 如 


// sub-optimal loop 

for (var i = 0; i < myarray.length; i++) { 
// do something with myarray[i] 

} 


这 种 模式 的 问题 是 ， 每 次 遍历 都 会 访问 数组 的 length 属 性 。 这 降低 了 代码 运行 效率 ， 特 别 是 当 
myarray 并 不 是 一 个 数组 而 是 一 个 HTMLCollection 对 象 的 时 候 。 


HTMLCollection 是 由 DOM 方 法 返回 的 对 象 ， 比 如 : 


e document.getElementsByName() 
e document.getElementsByClassName() 
e document.getElementsByTagName() 


还 有 很 多 其 他 的 HTMLCollection， 这 些 对 象 是 在 DOM 标 准 之 前 就 已 经 在 用 了 ， 这 些 
HTMLCollection 主要 包括 : 


document.images 

页 面 中 所 有 的 IMG 元 素 
document.links 

页 面 中 所 有 的 A 元 素 
document.forms 

页 面 中 所 有 的 表单 
document.forms[0].elements 
页 面 中 第 一 个 表单 的 所 有 字段 


这 些 对 象 的 问题 在 于 ， 它 们 均 是 指向 文档 (HTML 页 面 ) 中 的 活动 对 象 。 也 就 是 说 每 次 通过 它 
们 访问 集合 的 length 时 ， 总 是 会 去 查询 DOM， 而 DOM 操 作 则 是 很 耗资 源 的 。 


更 好 的 办 法 是 为 for 循 环 缓存 住 要 遍历 的 数组 的 长 度 ， 比 如 下 面 这 段 代 码 : 


for (var i = 0, max = myarray.length; i < max; i++) { 
// do something with myarray[i] 
} 


这 种 方法 只 需要 访问 DOM 节 点 一 次 以 获得 length， 在 整个 循环 过 程 中 就 都 可 以 使 用 它 


不 管 在 什么 浏览 器 中 ， 在 遍历 HTMLCollection 时 缓存 length 都 可 以 让 程序 执行 的 更 快 ， 可 以 提 
速 两 倍 (Safari3) 到 一 百 九 十 倍 (IE7) 不 等 。 更 多 细节 可 以 参照 Nicholas Zakas 的 《高 性 能 
JavaScript》， 这 本 书 也 是 由 O'Reilly 出 版 。 


需要 注意 的 是 ， 当 你 在 循环 过 程 中 需要 修改 这 个 元 素 集 合 〈 比 如 增加 DOM 元 素 ) 时 ， 你 更 希 
望 更 新 length 而 不 是 更 新 常量 。 


遵照 单 var 模 式 ， 你 可 以 将 var 提 到 循环 的 外 部 ， 比 如 : 


function looper() { 

var i= 0, 
max, 
myarray = []; 

VE an 

for (i = 0, max = myarray.length; i < max; i++) { 
// do something with myarray[i] 

} 


这 种 模式 带 来 的 好 处 就 是 提高 了 代码 的 一 致 性 ， 因 为 你 越 来 越 依赖 这 种 单 var 模 式 。 缺 点 就 是 
在 重 构 代码 的 时 候 不 能 直接 复制 粘贴 一 个 循环 体 ， 比 如 ， 你 正在 将 某 个 循环 从 一 个 函数 拷贝 

至 另外 一 个 函数 中 ， 必 须 确保 i| 和 max 也 拷贝 至 新 函数 里 ， 并 且 需 要 从 上 昌 函 数 中 将 这 些 没 用 的 
变量 删除 掉 。 


最 后 一 个 需要 对 循环 做 出 调整 的 地 方 是 将 i++ 替换 成 为 下 面 两 者 之 一 : 


th etal a ol 
i += 1 


JSLint 提 示 你 这 样 做 ， 是 因为 ++ 和 -- 实 际 上 降低 了 代码 的 可 读 性 ， 如 果 你 觉得 无 所 谓 ， 可 以 将 
JSLint 的 plusplus 选 项 设 为 false (默认 为 true) ， 本 书 所 介绍 的 最 后 一 个 模式 用 到 了 :i+= 1。 


关于 这 种 for 模 式 还 有 两 种 变化 的 形式 ， 做 了 少量 改进 ， 原 因 有 二 : 


e 减少 一 个 变量 (没有 max ) 
© 减 量 循环 至 0， 这 种 方式 速度 更 快 ， 因 为 和 零 比 较 要 比 和 非 零 数字 或 数组 长 度 比 较 要 高 效 
的 多 


第 一 种 变化 形式 是 : 


var i, myarray = []; 

for (i = myarray.length; i--;) { 
// do something with myarray[i] 

} 


第 二 种 变化 形式 用 到 了 while 循 环 : 


var myarray = [], 

i = myarray.length; 
while (i--) { 

// do something with myarray[i] 
} 


这 些小 改进 只 体现 在 性 能 上 ， 此 外 ，JSLint 不 推荐 使 用 i--。 


for-in 循环 


for-in 循环 用 于 对 非 数 组 对 象 作 遍 历 。 通 过 for-in 进 行 循环 也 被 称 作 “ 枚 举 "。 


从 技术 角度 讲 ，for-in 循 环 同样 可 以 用 于 数组 〈JavaScript 中 数组 即 是 对 象 ) ， 但 不 推荐 这 样 
做 。 当 使 用 自 定 义 函 数 扩充 了 数组 对 象 时 ， 这 时 更 容易 产生 逻辑 错误 。 另 外 ，for-in 循 环 中 属 
性 的 遍历 顺序 是 不 国定 的 ， 所 以 最 好 数组 使 用 普通 的 for 循 环 ， 对 象 使 用 for-in 循 环 。 


可 以 使 用 对 象 的 hasOwnProperty() 方 法 将 从 原型 链 中 继承 来 的 属性 过 滤 掉 ， 这 一 点 非常 重 
要 。 看 一 下 这 上段 代码 : 


// the object 
var man = { 
hands: 2, 


// somewhere else in the code 

// a method was added to all objects 

if (typeof Object.prototype.clone === "undefined") { 
Object.prototype.clone = function () {}; 

} 


在 这 段 例子 中 ， 我 们 定义 了 一 个 名 叫 man 的 对 象 直接 量 。 在 代码 中 的 某 个 地 方 (可 以 是 man 定 
义 之 前 也 可 以 是 之 后 ) ， 给 Object 的 原型 中 增加 了 一 个 方法 clone()。 原 型 链 是 实时 的 ， 这 意 
味 着 所 有 的 对 象 都 可 以 访问 到 这 个 新 方法 。 要 想 在 枚 举 man 的 时 候 避 免 枚 举 出 clone() 方 法 ， 

则 需要 调用 hasOwnProperty() 来 对 原型 属性 进行 过 滤 。 如 果 不 做 过 滤 ，clone() 也 会 被 遍历 

到 ， 而 这 不 是 我 们 所 硕 望 的 : 


Hit ake 
// for-in loop 
for (var i in man) { 
if (man.hasOwnProperty(i)) { // filter 


console.log(i, ":", man[i]); 
} 
} 
jew 
result in the console 
hands : 2 
legs : 2 
heads : 1 
EW 
// 2. 


// antipattern: 
// for-in loop without checking hasOwnProperty() 
for (var i in man) { 
console.log(i, ":", man[i]); 
} 


ips 

result in the console 
hands : 2 

legs : 2 

heads : 1 

clone: function() 

S 


另外 一 种 的 写法 是 通过 Object.prototype 直 接 调用 hasOwnProperty() 方 法 ， 像 这 样 : 


for (var i in man) { 
if (Object.prototype.hasOwnProperty.call(man, i)) { // filter 
console.log(i, ":", man[i]); 
} 


} 


这 种 做 法 的 好 处 是 ， 当 man 对 象 中 重新 定义 了 hasOwnProperty 方 法 时 ， 可 以 避免 调用 时 的 命 
名 冲突 (译注 : 明确 指定 调用 的 是 Object.prototype 上 的 方法 而 不 是 实例 对 象 中 的 方法 ) ， 这 

种 做 法 同样 可 以 避免 兄长 的 属性 查找 过 程 (译注 : 这 种 查找 过 程 多 是 在 原型 链 上 进行 查 

R) ， 一 直 查 找到 Object 中 的 方法 ， 你 可 以 定义 一 个 变量 来 “缓存 " 住 它 (译注 : 这 里 所 指 的 是 

缓存 住 Object.prototype.hasOwnProperty ) 


var i, 
hasOwn = Object.prototype.hasOwnProperty; 
for (i in man) { 
if (hasOwn.call(man, i)) { // filter 
console.log(i, ":", man[i]); 
} 
} 


严格 说 来 ， 省 咯 hasOwnProperty() 并 不 是 一 个 错误 。 根 据 具体 的 任务 以 及 你 对 代码 的 自 
信 程 度 ， 你 可 以 省 略 掉 它 以 提高 一 些 程序 执行 效率 。 但 当 你 对 当前 要 遍历 的 对 象 不 确定 
的 时 候 ， 添 加 hasOwnProperty() 则 更 加 保险 些 。 


tee We a 
的 行 加 入 了 if 判 断 条 件 ， 他 的 好 处 是 能 让 循环 语句 读 起 来 更 完整 和 通顺 (“如 果 元 素 包 
X， 则 拿 X 做 点 什么 ”) 


// Warning: doesn't pass JSLint 

var i, 
hasOwn = Object.prototype.hasOwnProperty; 

for (i in man) if (hasOwn.call(man, i)) { // filter 
console.log(i, ":", man[i]); 

} 


(不 ) 扩充 内 置 原型 


我 们 可 以 扩充 构造 函数 的 prototype 属 性 


， 这 是 一 种 非常 强大 的 特性 ， 用 来 为 构造 函数 增加 功 
能 ， 但 有 时 这 e 


给 内 置 构造 函数 比如 Object()、Array()、 和 Function() 扩 充 原 型 看 起 来 非常 族人， 但 这 种 做 法 
严重 降低 了 代码 的 可 维护 性 ， 因 为 它 让 你 的 代码 变 得 难以 预测 。 对 于 那些 基于 你 的 代码 做 开 
发 的 开发 者 来 说 ， 他 们 更 希望 使 用 原 ee 的 连续 性 ， 而 不 是 使 用 你 
所 添加 的 方法 (译注 : 因为 原生 的 方法 更 可 靠 ， 而 你 写 的 方法 可 能 会 有 bug) 。 


另外 ， 如 果 将 属性 添加 至 原型 中 ， 很 可 能 导致 在 那些 不 使 用 hasOwnProperty() 做 检测 的 循环 
中 将 原型 上 的 属性 遍历 出 来 ， 这 会 造成 混乱 。 


因此 ， 不 扩充 内 置 对 象 的 原型 是 最 好 的 ， 你 也 可 以 自己 定义 一 个 规则 ， 仅 当下 列 条 件 满 足 时 


做 例外 考虑 : 
1. 未 来 的 ECMAScript 版 本 的 JavaScirpt 会 将 你 实现 的 方法 添加 为 内 置 方 法 。 比 如 ， 你 可 以 


2. 


3. 


实现 ECMAScript5 定 义 的 一 些 方法 ， 一 直 等 到 浏览 器 升级 至 支持 ES5。 这 样 ， 你 只 是 提前 

定义 了 这 些 有 用 的 方法 。 

如 果 你 发 现 你 自 定 义 的 方法 已 经 不 存在 ， 要 么 已 经 在 代码 其 他 地 方 实现 了 ， 要 么 是 浏览 
器 的 JavaScript 引 擎 已 经 内 置 实现 了 。 

你 所 做 的 扩充 附带 充分 的 文档 说 明 ， 且 和 团队 其 他 成 员 做 了 沟通 。 


如 果 你 遇 到 这 三 种 情况 之 一 ， 你 可 以 给 内 置 原型 添加 自 定义 方法 ， 写 法 如 下 : 


if (typeof Object.protoype.myMethod !== "function") { 


Object.protoype.myMethod = function () { 
// implementation... 


号 


switch 模式 


你 可 以 通过 下 面 这 种 模式 的 写法 来 增强 switch 语 句 的 可 读 性 和 健壮 性 : 


var inspect_me = 0, 


meswlte ni 
switch (inspect_me) { 
case 0: 
result = "zero"; 
break; 
case 1: 
result = "one"; 
break; 
default: 
result = "unknown"; 
} 


这 个 简单 的 例子 所 遵循 的 风格 约定 如 下 : 


每 个 case 和 Switch 对 齐 (这 里 不 考虑 花 括号 相关 的 缩 进 规则 ) 

每 个 case 中 的 代码 整齐 缩 进 

每 个 case 都 以 break 作 为 结束 

避免 连续 执行 多 个 case 语 句 块 ( 当 省 略 break 时 会 发 生 ) ， 如 果 你 坚持 认为 连续 执行 多 
case 语 句 块 是 最 好 的 方法 ， 请 务必 补充 文档 说 明 ， 对 于 其 他 人 来 说 ， 这 种 情况 看 起 来 是 
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以 default 结 束 整 个 switch， 以 确保 即便 是 在 找 不 到 匹配 项 时 也 会 有 正常 的 结果 ， 


避免 隐 式 类 型 转换 


在 JavaScript 的 比较 操作 中 会 有 一 些 隐 式 的 数据 类 型 转换 。 上 比如 诸如 false == 0 或 "==0 之 类 的 
比较 都 返回 true ° 


为 了 避免 隐 式 类 型 转换 造 对 程序 造成 干扰 ， 推 荐 使 用 === 和 I=== 运 算 符 ， 它 们 较 除了 上 比较 值 还 
会 比较 类 型 。 


var zero = 0; 
if (zero === false) { 
// not executing because zero is 0, not false 


// antipattern 
if (zero == false) { 

// this block is executed... 
} 


另外 一 种 观点 认为 当 == 够 用 的 时 候 就 不 必 多 余 的 使 用 ===。 比 如 ， 当 你 知道 typeof 的 返回 值 是 
一 个 字符 串 ， 就 不 必 使 用 全 等 运算 符 。 但 JSLint 却 要 求 使 用 全 等 运算 符 ， 这 当然 会 提高 代码 风 
格 的 一 致 性 ， 并 减少 了 阅读 代码 时 的 思考 (“这 里 使 用 == 是 故意 的 还 是 无 意 的 ?”) 。 


避免 使 用 eval() 


当 你 想 使 用 eval() 的 时 候 ， 不 要 忘 了 那 句 话 “eval() 是 魔 提 "。 这 个 函数 的 参数 是 一 个 字符 串 ， 

可 以 执行 任意 字符 串 。 如 果 事 先知 道 要 执行 的 代码 是 有 问题 的 (在 运行 之 前 ) ， 则 ae 
使 用 eval() 。 如果 需 要 在 运行 时 动态 生成 执行 代码 ， 往 往 都 会 有 更 佳 的 方式 达到 同样 的 目的 ， 
而 非 一 定 要 使 用 eval()。 例 如 ， 访 问 动态 属性 时 可 以 使 用 方 括号 : 


// antipattern 

var property = "name"; 
alert(eval("obj." + property)); 
// preferred 

var property = "name"; 
alert(obj[property]); 


eval() 同 样 有 安全 隐患 ， 因 为 你 需要 运行 一 些 容易 被 干扰 的 代码 (比如 运行 一 段 来 自 于 网 络 的 
代码 ) 。 在 处 理 Ajax 请 求 所 返回 的 JSON 数 据 时 会 常 遇 到 这 种 情况 ， 使 用 eval() 是 一 种 反 模 
式 。 这 种 情况 下 最 好 使 用 浏览 器 的 内 置 方法 来 解析 JSON 数 据 ， 以 确保 代码 的 安全 性 和 数据 的 
合法 性 。 如 果 浏 览 器 不 支持 JSON.parse()， 你 可 以 使 用 JSON.org 所 提供 的 库 。 


记 住 ， 多 数 情况 下 ， 给 setlnterval()、setTimeout() 和 Function() 构 造 函 数 传 入 字符 串 的 情形 和 
eval() 类 似 ， 这 种 用 法 也 是 应 当 避 免 的 ， 这 一 点 非常 重要 ， 因 为 这 些 情形 中 JavaScript 最 终 还 
是 会 执行 传 入 的 字符 串 参 数 : 


// antipatterns 
setTimeout("myFunc()", 1000); 
setTimeout("myFunc(1, 2, 3)", 1000); 
// preferred 
setTimeout(myFunc, 1000); 
setTimeout(function () { 

myFunc(1, 2, 3); 
}, 1000); 


new Function() 的 用 法 和 eval() 非 常 类 似 ， 应 当 特 别 注意 。 这 种 构造 函数 的 方式 很 强大 ， 但 往 
往 被 误 用 。 如 果 你 不 得 不 使 用 eval()， 你 可 以 尝试 用 new Function() 来 代替 。 这 有 一 个 潜在 的 
好 处 ， 在 new Function() 中 运行 的 代码 会 在 一 个 局 部 函数 作用 域内 执行 ， 因 此 源码 中 所 有 用 
Var 定义 的 变量 不 会 自动 变 成 全 局 变量 。 还 有 一 种 方法 可 以 避免 eval() 中 定义 的 变量 转换 为 全 局 
变量 ， 即 是 将 eval() 包 装 在 一 个 立即 执行 的 匿名 函数 内 (详细 内 容 请 参照 第 四 章 ) o 


看 一 下 这 个 例子 ， 这 里 只 有 un 成 为 了 全 局 变量 ， 污 染 了 全 局 命名 空间 : 


console.log(typeof un);// "undefined" 
console.log(typeof deux); // "undefined" 
console.log(typeof trois); // "undefined" 


var jsstring = "var un = 1; console.log(un);"; 
eval(jsstring); // logs "1" 


jsstring = "var deux = 2; console.log(deux);"; 
new Function(jsstring)(); // logs "2" 


jsstring = "var trois = 3; console.log(trois);"; 
(function () { 

eval(jsstring); 
}()); // logs "3" 


console.log(typeof un); // "number" 
console.log(typeof deux); // "undefined" 
console.log(typeof trois); // "undefined" 


eval() 和 Function 构 造 函 数 还 有 一 个 区 别 ， 就 是 eval() 可 以 修改 作用 域 链 ， 而 Function 更 像 是 一 
个 沙 箱 。 不 管 在 什么 地 方 执行 Function， 它 只 能 看 到 全 局 作用 域 。 因 此 它 不 会 太 严重 的 污染 局 

部 变量 。 在 下 面 的 示例 代码 中 ，eval() 可 以 访问 且 修 改 其 作用 域 之 外 的 变量 ， 而 Function 不 能 
(注意 ， 使 用 Function 和 new Function 是 完全 一 样 的 ) 。 


(function () { 
var local = 1; 
eval("local = 3; console.log(local)"); // logs 3 
console.log(local); // logs 3 


3()); 


(function () { 
var local = 1; 
Function("console.log(typeof local);")(); // logs undefined 


3()); 


使 用 parselnt() 进 行 数字 转换 


可 以 使 用 parselnt() 将 字符 串 转换 为 数字 。 函 数 的 第 二 个 参数 是 转换 基数 (译注 : “基数 " 指 的 
是 数字 进 制 的 方式 ) ， 这 个 参数 通常 被 省 略 。 但 当 字 符 串 以 0 为 前 缓 时 转换 就 会 出 错 ， 例 如 ， 
在 表单 中 输入 日 期 的 一 个 字段 。ECMAScript3 中 以 0 为 前 组 的 字符 串 会 被 当 作 八进制 数 处 理 

(基数 为 8) 。 但 在 ES5 中 不 是 这 样 。 为 了 避免 转换 类 型 不 一 致 而 导致 的 意外 结果 ， 应 当 总 是 
指定 第 二 个 参数 : 


var month = "06", 

year = "09"; 
month = parseInt(month, 10); 
year = parseInt(year, 10); 


在 这 个 例子 中 ， 如 果 省 略 掉 parselnt 的 第 二 个 参数 ， 比 如 parselnt(year)， 返 回 值 是 0， 
为 “09” 被 认为 是 八进制 数 (等 价 于 parselnt(year,8)) ， 而 且 09 是 非法 的 八进制 数 。 
字符 串 转换 为 数字 还 有 两 种 方法 : 

+"08" // result is 8 

Number("08") // 8 
这 两 种 方法 要 比 parselnt() 更 快 一 些 ， 因 为 顾名思义 parselnt() 是 一 种 “解析 "而 不 是 简单 的 “ 转 
换 ”。 但 当 你 期 望 将 “08 hello" 这 类 字符 串 转 换 为 数字 ， 则 必须 使 用 parselnt()， 其 他 方法 都 会 返 


可 NaN。 


编码 风格 


确立 并 遵守 编码 规范 非常 ， 这 会 让 你 的 代码 风格 一 致 、 可 预测 、 可 读 性 更 强 。 团 队 新 成 
员 通 过 学 习 进入 开发 状态 、 并 写 出 团队 其 他 成 员 多 于 理解 的 代码 。 


在 开源 社区 和 邮件 组 中 关于 编码 风格 的 争论 一 直 不 断 (比如 关于 代码 缩 进 ， 用 tab 还 是 空 
格 ? ) 。 因 此 ， P E E A 多 时 ， 要 做 好 应 对 各 种 反对 意见 的 心理 
准备 ， 而 且 要 吸取 各 种 意见 ， 这 对 确立 并 一 贯 遵守 某 种 编码 规范 是 非常 重要 ， 而 不 是 斤 斤 计 
较 的 纠结 于 编码 规范 的 细节 。 


缩 进 
代码 没有 缩 进 几乎 就 不 能 读 了 ， 而 不 一 致 的 统 ， 因 为 它 看 上 去 像 是 遵循 了 规范 ， 
站 正 读 起 来 却 厂 厂 绊 绊 。 因 此 规范 的 使 用 缩 进 非常 


有 些 开发 者 喜欢 使 用 tab 缩 进 ， 因 为 每 个 人 都 可 以 根据 自己 的 喜好 来 调整 tab 缩 进 的 空格 数 ， 有 
些 人 则 喜欢 使 用 空格 缩 进 V APEENEN AMEMA LAMB ETAMATA TR 
范 即 可 ， 本 书 中 所 有 的 示例 代码 都 采用 四 个 空格 的 缩 进 ， 这 也 是 JSLint 所 推荐 的 。 


那么 到 底 什 么 应 该 缩 进 呢 ? 规则 很 简单 ， 花 括号 里 的 内 容 应 当 缩 进 ， 包 括 函 数 体 、 循 环 
(do、while、for 和 for-in) 体 、 谎 条 件 、switch 语 多 和 对 象 直接 量 里 的 属性 。 下 面 的 代码 展示 
了 如 何 正 确 的 使 用 缩 进 


function outer(a, b) { 
var c = 1, 


d = 2, 
inner; 
if (a > b) { 
inner = function () { 
return { 
Ga c = | 
}; 
}; 
} else { 
inner = function () { 
return { 
Re te ar ol 
}; 
}; 
} , 
return inner; 
} 
ar 2 
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应 当 总 是 使 用 花 括号 ， 即 使 是 在 可 省 略 花 括 号 的 时 候 也 应 当 如 此 。 从 技术 角度 讲 ， 如 果 if 或 for 
中 只 有 一 个 语句 ， 花 括号 是 可 以 省 略 的 ， 但 最 好 还 是 不 要 省 略 。 这 让 你 的 代码 更 加 工整 一 臻 
而 且 易于 更 新 。 


假设 有 这 样 一 段 代 码 ，for 循 环 中 只 有 一 条 语句 ， 你 可 以 省 略 掉 这 里 的 花 括 号 ， 而 且 不 会 有 语 
法 错误 : 


// bad practice 
for (var i = 0; i < 10; i += 1) 
alert(i); 


但 如 果 过 了 一 段 时 间 ， 你 给 这 个 循环 添加 了 另 一 行 代码 ? 


// bad practice 
for (var i = 0; i < 10; i += 1) 
alert(i); 
allerti ges Ws S(T G52) eo dd even Dy 


第 二 个 alert 实 际 处 于 循环 体 之 外 ， 但 这 里 的 缩 进 会 迷惑 你 。 长 远 考 虑 最 好 还 是 写 上 花 括 号 ， 
即便 是 在 只 有 一 个 语句 的 语句 块 中 也 应 如 此 : 
// better 


for (var i = 0; i < 10; i += 1) { 
alert(i); 
} 


同 理 ，if 条 件 句 也 应 当 如 此 : 


// bad 

if (true) 
alert(1); 

else 
alert(2); 


// better 
if (true) { 
alert(1); 


} else { 
alert(2); 
} 


左 花 括号 的 位 置 
开发 人 员 对 于 左 大 括号 的 位 置 有 着 不 同 的 偏好 ， 在 同一 行 呢 还 是 在 下 一 行 ? 


if (true) { 
alert("It's TRUE!"); 


或 者 : 


if (true) 


alert("It's TRUE!"); 
} 


在 这 个 例子 中 ， 看 起 来 只 是 个 人 偏好 问题 。 但 有 时 候 花 括号 位 置 的 不 同 则 会 影响 程序 的 执 
行 。 因 为 JavaScript 会 “自动 插入 分 号 "。JavaScript 对 行 结束 时 的 分 号 并 无 要 求 ， 它 会 自动 将 
分 号 补 全 。 因 此 ， 当 函数 return 语 名 返回 了 一 个 对 象 直接 量 ， 而 对 象 的 左 花 括号 和 return 不 在 
同一 行 时 ， 程 序 的 执行 就 和 预想 的 不 同 了 : 


// warning: unexpected return value 
function func() { 
return 


name: "Batman" 


F; 


可 以 看 出 程序 作者 的 意图 是 返回 一 个 包含 了 name 属 性 的 对 象 ， 但 实际 情况 不 是 这 样 。 因 为 


return 后 会 填补 一 个 分 号 ， 函 数 的 返回 值 就 是 undefined。 这 段 代 码 等 价 于 : 


// warning: unexpected return value 
function func() { 

return undefined; 

// unreachable code follows... 


{ 
}; 


name: "Batman" 


结论 ， 总 是 使 用 花 括 号 ， 而 且 总 是 将 左 花 括号 与 上 一 条 语句 放 在 同一 行 : 


function func() { 
return { 
name: "Batman" 


F; 


关于 分 号 应 当 注意 : 和 花 括号 一 样 ， 应 当 总 是 使 用 分 号 ， 尽 管 在 JavaScript 解 析 代 码 时 会 
补 全 行 末 省 略 的 分 号 。 严 格 遵 守 这 条 规则 ， 可 以 让 代码 更 加 严谨 ， 同 时 可 以 避免 前 面 例 
子 中 所 出 现 的 歧义 。 


空格 


空格 的 使 用 同样 有 助 于 改善 代码 的 可 读 性 和 一 致 性 。 在 写 英 文句 子 的 时 候 ， 在 过 号 和 名 号 后 
面 会 使 用 间隔 。 在 JavaScript 中 ， 你 可 以 按照 同样 的 逻辑 在 表达 式 (相当 于 去 号 ) 和 语句 结束 
(相对 于 完成 了 某 个 “想法 ") 后 面 添加 间隔 。 


适合 使 用 空格 的 地 方 包括 : 


e for 循 环 中 的 分 号 之 后 ， 比 如 for (var i = 0; i < 10; i += 1) {...} 

© for 循 环 中 初始 化 多 个 变量 ， 比 如 for (var i = 0, max = 10; i < max; i += 1) {...} 
e 分 隔 数 组 项 的 过 号 之 后 ，var a = [1, 2, 3]; 

e@ 对 象 属性 后 的 过 号 以 及 名 值 对 之 间 的 冒号 之 后 ，var o= {a:i 1, b: 2}; 

e 函数 参数 中 ， myFunc(a, b, c) 

e 函数 声明 的 花 括 号 之 前 ” function myFunc() {} 

e 匿名 函数 表达 式 function 之 后 ” var myFunc = function () {}; 


A 外 2 我 们 推荐 在 运算 符 和 操作 数 之 间 添加 空格 o 也 就 是 说 在 +， as be =, <, 之 ; <=, >=, ==, l==, 
&&, ||, += 符 号 前 后 都 添加 空格 。 


// generous and consistent spacing 
// makes the code easier to read 
// allowing it to "breathe" 
var d = 0, 
a=b+4+1; 
if (a && b && c) { 
d=a%c 
a += d; 
} 
// antipattern 
// missing or inconsistent spaces 
// make the code confusing 
var d= 0, 
a =b+1; 
if (a&& eo { 
d=a %c 
at= Ta 


Re UHR? MPLS FUR eH : 


。 在 函数 、if-else 语 句 、 循 环 、 对 象 直接 量 的 左 花 括号 之 前 补充 空格 ({) 
© 在 右 花 括号 和 else 和 while 之 间 补 充 空格 


重 直 空白 的 使 用 经 常 被 我 们 忽略 ， 你 可 以 使 用 空 行 来 将 代码 单元 分 隔 开 ， 就 像 文学 作品 
中 使 用 段落 作 分 隔 一 样 。 

A + 

命名 规范 

另外 一 种 可 以 提升 你 代码 的 可 预测 性 和 可 维护 性 的 方法 是 采用 命名 规范 。 也 就 是 说 变量 和 通 

数 的 命名 都 遵照 同 种 习惯 。 

名 规范 ， 你 可 以 原样 采用 ， 也 可 以 根据 自己 的 喜好 作 调整 。 同 样 ， 遵 循 

范 要 比 规范 本 身 更 加 重要 。 
构造 器 命名 中 的 大 小 写 
JavaScript 中 没有 类 ， 但 有 构造 函数 ， 可 以 通过 new 来 调用 构造 函数 : 


var adam = new Person(); 


由 于 构造 函数 毕竟 还 
生 


是 函数 ， 不 管 我们 将 它 用 作 构 造 器 还 是 函数 ， 当 然 希望 只 通过 函数 名 就 
可 分 辨 出 它 是 构造 器 还 是 六 E; 


首 字母 大 写 可 以 提示 你 这 是 一 个 构造 函数 ， 而 首 字母 小 写 的 函数 一 般 只 认为 它 是 普通 的 郊 
数 ， 不 应 该 通过 new 来 调用 它 


function MyConstructor() {...} 
function myFunction() {...} 


下 一 章 将 介绍 一 些 强制 将 函数 用 作 构 造 器 的 编程 模式 ， 但 遵守 我 们 所 提 到 的 命名 规范 会 更 好 
的 帮助 程序 员 阅读 源码 。 


单词 分 隔 


当 你 的 变量 名 或 函数 名 中 含有 多 个 单词 时 ， 单 词 之 间 的 分 隔 也 应 当 遵 循 统一 的 约定 。 最 常见 
的 做 法 是 “驼峰 式 "命名 ， 单 词 都 是 小 写 ， 每 个 单词 的 首 字母 是 大 写 


对 于 构造 函数 ， 可 以 使 用 "大 驼峰 式 " 命 名 ， 比 如 MyConstructor()， 对 于 函数 和 方法 ， 可 以 采 
用 "小 驼峰 式 " 命 名 ， 比 如 myFunction()，calculateArea() 和 getFirstName()。 


那么 对 于 那些 不 是 函数 的 变量 应 当 如 何 命 名 呢 ? 变量 名 通常 采用 小 驼峰 式 命名 ， 还 有 一 个 不 
错 的 做 法 是 ， 变 量 所 有 字母 都 是 小 写 ， 单 词 之 间 用 下 划 线 分 隔 ， 比 如 ，first_name ， 
favorite_bands 和 old_company_name， 这 种 方法 可 以 帮助 你 区 分 函数 和 其 他 标识 符 一 一 原始 
数据 类 型 或 对 象 。 

ECMAScript 的 属性 和 方法 均 使 用 Camel 标 记 法 ， 尽 管 多 字 的 属性 名 称 是 罕见 的 (正则 表达 式 
对 象 的 lastlndex 和 ignoreCase 属 性 ) o 


在 ECMAScript 中 的 属性 和 方法 均 使 用 驼峰 式 命名 ， 尽 管 包含 多 单词 的 属性 名 称 (正则 表达 式 
对 象 中 的 lastlndex 和 ignoreCase) 并 不 常见 


也 命名 风格 
有 时 开发 人 员 使 用 命名 规范 来 弥补 或 代替 语 言 特 ， 性 的 不 足 。 


比如 ，JavaScript 中 无 法 定义 常量 (尽管 有 一 些 内 置 常 量 比如 Number.MAX_VALUE) ， 所 以 
开发 者 都 采用 了 这 种 命名 习惯 ， 对 于 那些 程序 运行 周期 内 不 会 更 改 的 变量 使 用 全 大 写字 母 来 
命名 。 比 如 : 


// precious constants, please don't touch 
var PI = 3.14, 
MAX_WIDTH = 800; 


除了 使 用 大 写字 母 的 命名 方式 之 外 ， 还 有 另 一 种 命名 规约 : 全 局 变量 都 大 写 。 这 种 命名 方式 
和 "减少 全 局 变量 ?的 约定 相辅相成 ， 并 让 全 局 变量 很 容易 辨认 。 
常量 和 全 局 变量 的 命名 惯例 ， 这 里 讨论 另外 一 种 命名 惯例 ， 即 私有 变量 的 命名 。 尽 管 在 


sre 以 量 的 ， 但 开发 人 员 更 喜欢 在 私有 成 员 或 方法 名 之 前 如 上 下 
划 线 前 级 ， 比 如 下 面 的 例子 


var person = { 
getName: function () { 
return this._getFirst() + ' ' + this._getLast(); 


}, 
_getFirst: function () { 
WE” divs 


}, 

_getLast: function () { 
TUE ive 

} 


}; 


在 这 个 例子 中 ，getName() 的 身份 是 一 个 公有 方法 ， 属 于 稳定 的 API， 而 _getFirst() 和 
_getLast() 则 是 私有 方法 。 尽 管 这 两 个 方法 本 质 上 和 公有 方法 无 异 ， 但 在 方法 名 前 加 下 划 线 前 
组 就 是 为 了 警告 用 户 不 要 直接 使 用 这 两 个 私有 方法 ， 因 为 不 能 保证 它们 在 下 一 个 版 本 中 还 能 
正常 工作 。JSLint 会 对 私有 方法 作 检查 ， 除 非 设 置 了 JSLint 的 nomen 选 项 为 false。 
下 面 介绍 一 些 _private 风 格 写 法 的 变种 : 

© 在 名 字 尾 部 添加 下 划 下 以 表明 私有 ， 比 如 name 和 getElements_() 

o 使 用 一 个 下 划 线 前 组 表明 受 保护 的 属性 _protected， 用 两 个 下 划 线 前 组 表明 私有 属性 

_ private 
。 在 Firefox 中 实现 了 一 些 非 标准 的 内 置 属 性 ， 这 些 属 性 在 开头 和 结束 都 有 两 个 下 划 线 ， 比 


如 proto 和 parent 





书写 注释 
写 代码 就 要 写 注 释 ， 即 便 你 认为 你 的 代码 不 会 被 别人 读 到 。 当 你 对 一 个 问题 非常 熟悉 时 ， 你 
会 很 快 找到 问题 代码 ， 但 当 过 了 几 个 星期 后 再 来 读 这 段 代 码 ， 则 需要 绞 尽 脑汁 的 回想 代码 的 
逻辑 。 
你 不 必 对 显而易见 的 代码 作 过 多 的 注释 : 每 个 变量 和 每 一 行 都 作 注 释 。 但 你 需要 对 所 有 的 函 
数 、 他 们 的 参数 和 返回 值 补 充 注 释 ， 对 于 那些 有 趣 的 或 怪异 的 算法 和 技术 也 应 当 配 备注 释 。 
对 于 阅读 你 的 代码 的 其 他 人 来 说 ， 注 释 就 是 一 种 提示 ， 只 要 阅读 注释 、 函 数 名 以 及 参数 ， 就 
算 不 读 代码 也 能 大 概 理解 程序 的 逻辑 。 比 如 ， 这 里 有 五 到 六 行 代码 完成 了 某 个 功能 ， 如 果 提 
供 了 一 行 描述 这 段 代码 功能 的 注释 ， 读 程序 的 人 就 不 必 再 去 关注 代码 的 细节 实现 了 。 代 码 注 
释 的 写法 并 没有 硬性 规定 ， 有些 代码 片段 (比如 正则 表达 式 ) 的 确 需 要 比 代码 本 身 还 多 的 注 
由 于 过 时 的 注释 会 带 来 很 多 误导 ， 这 比 不 写 注释 还 糟糕 。 因 此 保持 注释 时 刻 更 新 的 习惯 
非常 重要 ， 尽 管 对 很 多 人 来 说 这 很 难 做 到 。 


在 下 一 小 节 我 们 会 讲 到 ， 注 释 可 以 自动 生成 文档 。 


# 5 APIX 7% 


很 多 人 都 觉得 写 文 档 是 一 件 枯燥 且 吃力 不 讨好 的 事情 ， 但 实际 情况 不 是 这 样 。 我 们 可 以 通过 
代码 注释 自动 生成 文档 ， 这 样 就 不 用 再 去 专门 写 文档 了 。 很 多 人 觉得 这 是 一 个 不 错 的 点 子 ， 
为 根据 茶 些 关键 字 和 格式 化 的 文档 自动 生成 可 阅读 的 参考 手册 本 身 就 是 “ 某 种 编程 ”。 


传统 的 APldoc 诞 生 自 Java 世 界 ， 这 个 工具 名 叫 avadoc”"， 和 Java SDK (软件 开发 工具 包 ) 一 
起 提供 。 但 这 个 创意 迅速 被 其 他 语言 和 借鉴。JavaScript 领 域 有 两 个 非常 优秀 的 开源 工具 ， 它 们 
是 JSDoc Toolkit (http://code.google.com/p/jsdoc-toolkit/ ) 和 

YUIDoc (http://yuilibrary.com/projects/yuidoc ) ° 


生成 API 文 档 的 过 程 包 括 : 


o 以 特定 的 格式 来 组 织 书写 源 代码 
© 运行 工具 来 对 代码 和 注释 进行 解析 
e 发 布 工具 运行 的 结果 ， 通 常 是 HTML 页 面 


你 需要 学 习 这 种 特殊 的 语法 ， 和 包括 十 几 种 标签 ， 写 法 类 似 于 : 


A 
* @tag value 
类 人 


比如 这 里 有 一 个 函数 reverse()， 可 以 对 字符 串 进行 反 序 操作 。 它 的 参数 和 返回 值 都 是 字符 
串 。 给 它 补充 注释 如 下 : 


[errs 
* Reverse a string 


* 


* 


@param {String} input String to reverse 
@return {String} The reversed string 


* 
vA 
var reverse = function (input) { 
CA 
return output; 


}; 


可 以 看 到 ，@param 是 用 来 说 明 输 入 参数 的 标签 ，@return 是 用 来 说 明 返 回 值 的 标签 ， 文 档 生 
成 工具 最 终 会 为 将 这 种 带 注释 的 源 代码 解析 成 格式 化 好 的 HTML 文 档 。 


一 个 例子 : YUIDoc 


YUIDoc 最 初 的 目的 是 为 YUI 库 (Yahoo! User Interface) 生成 文档 ， 但 也 可 以 应 用 于 任何 项 
目 ， 为 了 更 充分 的 使 用 YUIDoc 你 需要 学 习 它 的 注释 规范 ， 比 如 模块 和 类 的 写法 (当然 在 
JavaScript 中 是 没有 类 的 概念 的 ) 。 

让 我 们 看 一 个 用 YUIDoc 生 成 文档 的 完整 例子 。 


图 2-1 展 示 了 最 终生 成 的 文档 的 模样 ， 你 可 以 根据 项 目 需 要 随意 定制 HTML 模 板 ， 让 生成 的 文 
档 更 加 友好 和 个 性 化 。 


这 里 同样 提供 了 在 线 的 demo， 请 参照 http://jspatterns.com/book/2/。 


这 个 例子 中 所 有 的 应 用 作为 一 个 模块 (myapp) 放 在 一 个 文件 里 (app.js) ， 后 续 的 章节 会 更 
详细 的 介绍 模块 ， 现 在 只 需 知 道 用 可 以 用 一 个 YUIDoc 的 标签 来 表示 模块 即 可 。 


图 2-1 YUIDoc 生 成 的 文档 


ia dd 




















| myapp 1.0.0 | 
My JS App > myapp > MYAPP.Person Search: 
| Modules | | 器 Show Deprecated) 口 Show Protected) | |C] Show Private | 
myapp Class MYAPP.Person _ 
| Classes Constructs Person objects 
MYAPP.math_stuff = 
MYAPP.Person Constructor 
| Files MYAPP.Person ( first , last ) 
| See = Parameters: 
| Properties | first <String> First name 
Satna E last <String> Last name 
| last_name | [Properties 7 
|. Methods first_name - string 
getName 
| Name of the person 
last_name - string 
Last (family) name of the person 
| Methods 
getName 
String getName { ) 
Returns the name of the person object 
Returns: String 
The name of the person 
app.js 的 开始 部 分 : 
/ kk 


* My JavaScript application 


* 


* @module myapp 
ey 


然后 定义 了 一 个 空 对 象 作为 模块 的 命名 空间 : 


var MYAPP = {}; 


紧 接着 定义 了 一 个 包含 两 个 方法 的 对 象 math_stuff， 这 两 个 方法 分 别 是 sum() 和 multi() : 


JER 

* A math utility 

* @namespace MYAPP 

* @class math_stuff 

yf 

MYAPP.math_stuff = { 
Vis 
* Sums two numbers 


* 


@method sum 

@param {Number} a First number 

@param {Number} b The second number 
@return {Number} The sum of the two inputs 


* 
* 
* 
* 
a 


sum: function (a, b) { 
return a + b; 


}, 


[Poses 
* Multiplies two numbers 
* 


* @method multi 
* @param {Number} a First number 
* @param {Number} b The second number 
* @return {Number} The two inputs multiplied 
y 
multi: function (a, b) { 
return a * b; 
} 


ten 


这 样 就 结束 了 第 一 个 “类 ”的 定义 ， 注 意 粗 体 表示 的 标签 。 
@namespace 

指向 你 的 对 象 的 全 局 引用 

@class 

代表 一 个 对 象 或 构造 函数 的 不 恰当 的 称谓 (JavaScript P AA HF ) 
@method 

定义 对 象 的 方法 ， 并 指定 方法 的 名 称 

@param 

列 出 函数 需要 的 参数 ， 参 数 的 类 型 放 在 一 对 花 括号 内 ， 跟 随 其 后 的 是 参数 名 和 描述 
@return 

和 @param 类 似 ， 用 以 描述 方法 的 返回 值 ， 可 以 不 带 名 字 


我 们 用 构造 函数 来 实现 第 二 个 “类 ”， 给 这 个 类 的 原型 添加 一 个 方法 ， 能 够 体会 到 YUIDoc 采 用 
了 不 同 的 方式 来 创建 对 象 : 


JER 
* Constructs Person objects 
* @class Person 
* @constructor 
* @namespace MYAPP 
* @param {String} first First name 
* @param {String} last Last name 
SA 
MYAPP.Person = function (first, last) { 
JEE 
* Name of the person 
* @property first_name 
* @type String 
z 


this.first_name = first; 

Hers 

* Last (family) name of the person 
@property last_name 

@type String 


* 
* 
2 
this.last_name = last; 

3; 

Va 

* Returns the name of the person object 

* 

* @method getName 

* @return {String} The name of the person 


7 

MYAPP.Person.prototype.getName = function () { 
return this.first_name + ' ' + this.last_name; 

3; 


在 图 2-1 中 可 以 看 到 生成 的 文档 中 Person 构 造 函 数 的 生成 结果 ， 粗 体 的 部 分 是 


© @constructor 暗示 了 这 个 “类 "其实 是 一 个 构造 函数 
e @prototype 和 @type 用 来 描述 对 象 的 属性 


YUIDoc 工 具 是 语言 无 关 的 ， 只 解析 注释 块 ， 而 不 是 JavaScript 代 码 。 它 的 缺点 是 必须 要 在 注 
释 中 指定 属性 、 参 数 和 方法 的 名 字 ， 比 如 ，@property first_name。 好 处 是 一 旦 你 熟练 掌握 
YUIDoc， 就 可 以 用 它 对 任何 语言 源码 进行 注释 的 文档 化 。 


编写 荔 读 的 代码 


这 种 将 APIDoc 格 式 的 代码 注释 解析 成 API 参 考 文档 的 做 法 看 起 来 很 偷懒 ， 但 还 有 另外 一 个 目 
的 ， 通 过 代码 重审 来 提高 代码 质量 


ee td aha 甚至 是 写 一 本 好 书 或 好 文章 最 最 重要 的 步骤 。 将 想 
法 落实 在 纸 上 形 成 草稿 只 是 第 一 步 ， 草 稿 给 读者 提 的 信息 往往 重点 不 明晰 、 结 构 不 合理 、 或 
不 符合 循序 渐进 的 阅读 习惯 。 


对 于 编程 也 是 同样 的 道理 ， 当 你 坐 下 来 解决 一 个 问题 的 时 候 ， 这 时 的 解决 方案 只 是 一 种 " 草 
案 ”， 尽 管 能 正常 工作 ， 但 是 不 是 最 优 的 方法 呢 ? 是 不 是 可 读 性 好 、 易 于 理解 、 可 维护 佳 或 容 
eR? 当 一 段 时 间 后 再 来 review 你 的 代码 ， 一 定 会 发 现 很 多 需要 改进 的 地 方 ， 需 要 重新 组 织 


多 
质量 。 但 事情 往往 不 是 这 样 ， 我 们 常常 承受 着 高 强度 的 工作 压力 ， 根 本 没有 时 间 来 整理 代 


代码 或 删 掉 多 余 的 内 容 等 等 。 这 实际 上 就 是 在 “整理 "你 的 代码 了 ， 可 以 很 大 程度 提高 你 的 代码 
育 往 
码 ， 因 此 通过 代码 注释 写 文 档 其 实 是 不 错 的 机 会 。 


往往 在 写 注释 文档 的 时 候 ， 你 会 发 现 很 多 问题 。 你 也 会 重新 思考 源 代码 中 不 合理 之 处 ， 比 
如 ， 某 个 方法 中 的 第 三 个 参数 比 第 二 个 参数 更 常用 ， 第 二 个 参数 多 数 情况 下 取 值 为 tue， 因 此 
就 需要 对 这 个 方法 接口 进行 适当 的 改造 和 和 包装。 


写 出 易 读 的 代码 (RAPI) ， 是 指 别 人 能 轻易 读 懂 程序 的 思路 。 所 以 你 需要 采用 更 好 的 思路 来 
解决 手头 的 问题 。 


尽管 我 们 认为 “草稿 "不 其 完美 ， 但 至 少 也 算 “ 抱 佛 脚 "的 权宜 之 计 ， 一 眼看 上 去 是 有 点 “ 草 ”， 不 
过 也 无 所 谓 ， 特别 是 当 你 处 理 的 是 一 个 关键 项 目 时 (会 有 人 命 悬 与 此 ) 。 其 实 你 应 当 扔 掉 你 
所 给 出 的 第 一 个 解决 方案 ， 虽然 它 是 可 以 正常 工作 的 ， 但 毕竟 是 一 个 草率 的 方案 ， 不 是 最 住 
方案 。 你 给 出 的 第 二 个 方案 会 更 加 靠 谱 ， 因 为 这 时 你 对 问题 的 理解 更 加 透彻 。 第 二 个 方案 不 
是 简单 的 复制 粘贴 之 前 的 代码 ， 也 不 能 投机 取 巧 寻找 某 种 捷径 。 


相互 评审 


另外 一 种 可 以 提高 代码 质量 的 方法 是 组 织 相互 评审 。 同 行 的 评审 很 正式 也 很 规范 ， 即 便 是 求 
助 于 特定 的 工具 ， 也 不 失 是 一 种 开发 生产 线 上 值得 提倡 的 步骤 。 但 你 可 能 觉得 没有 时 间 去 作 
代码 互 审 ， 没 关系 ， 你 可 以 让 坐 在 你 旁边 的 同事 读 一 下 你 的 代码 ， 或 者 和 她 【译注 : 注意 
是 “她 "而 不 是 “他 ”) 一 起 过 一 遍 你 的 代码 。 


同样 ， 当 你 在 写 APIDoc 或 任何 其 他 文档 的 时 候 ， 同 行 的 评审 能 帮助 你 的 产 出 物 更 加 清晰 ， 
为 你 写 的 文档 是 让 别人 读 的 ， 你 必须 确保 别人 能 理解 你 所 作 的 东西 。 


同行 的 评审 是 一 种 非常 不 错 的 习惯 ， 不 仅仅 是 因为 它 能 让 代码 变 得 更 好 ， 更 重要 的 ， 在 评审 
的 过 程 中 ， 评 审 人 和 代码 作者 通过 分 享 和 讨论 ， 两 人 都 能 取长补短 、 相 互 促进 。 


如 果 你 的 团队 只 有 你 一 个 开发 人 员 ， 找 不 出 第 二 个 人 能 给 你 作 代 码 评审 ， 这 也 没关系 。 你 可 
以 通过 将 你 的 代码 片段 开源 ， 或 把 有 意思 的 代码 片段 贴 在 博客 中 ， 会 有 人 对 你 的 代码 感 兴趣 
的 。 


另外 一 个 非常 好 的 习惯 是 使 用 版 本 管理 工具 (CVS，SVN 或 Git) ， 一 旦 有 人 修改 并 提交 了 代 
码 ， 都 会 发 邮件 通知 组 内 成 员 。 虽 然 大 部 分 邮件 都 进入 了 垃圾 箱 ， 但 总 是 会 碰巧 有 人 在 工作 
间隙 看 到 你 所 提交 的 代码 ， 并 对 代码 做 出 一 些 评价 。 


生产 环境 中 的 代码 压缩 (Minify) 


这 里 所 说 的 代码 压缩 (Minify) 是 指 去 除 JavaScript 代 码 中 的 空格 、 注 释 以 及 其 他 不 必要 的 部 
分 ， 用 以 减少 JavaScript 文 件 的 体积 ， 降 低 网 络 带宽 损耗 。 我 们 通常 使 用 类 似 
YUICompressor (Yahoo!) 或 Closure Compiler (Google) 的 压缩 工具 来 为 网 页 加 载 提速 。 


对 于 生产 环境 (译注 : “生产 环境 " 指 的 是 项 目 上 线 后 的 正式 环境 ) 中 的 脚本 是 需要 作 压 缩 的 ， 
压缩 后 的 文件 体积 能 减少 至 原来 的 一 半 以 下 。 


下 面 这 段 代 码 是 压缩 后 的 样子 (这 段 代码 是 YUI2 库 中 的 Event 模 块 ) 


YAHOO .util.CustomEvent=function(D,C,B,A){this.type=D; this.scope=C| |window; this.silent 
=B; this.signature=A| | YAHOO.util.CustomEvent.LIST; this.subscribers=[];if(!this.silent) 
{}var E="_YUICEOnSubscribe";if (D!==E){this.subscribeEvent=new 
YAHOO.util.CustomEvent(E, this, true);}... 


除了 去 除 空格 、 空 行 和 注释 之 外 ， 压 缩 工 具 还 能 缩短 命名 的 长 度 (前 提 是 保证 代码 的 安 

sae Paka eae B、C、D 。 e a 因为 更 改 全 局 变 
会 破坏 代码 的 逻辑 。 这 也 是 要 尽量 使 用 局 部 变量 的 原因 。 如 果 你 使 用 的 全 局 变量 是 对 DOM 

eee ， 而 且 程 序 中 多 次 用 到 ， 最 好 将 它 赋值 给 一 个 局 部 变量 ， 这 样 能 提高 查找 速度 ， 

代码 也 会 运行 的 更 快 ， 此 外 还 能 提高 压缩 比 、 加 快 下 载 速 度 〈 译 注 : 在 服务 器 开启 Gzip 的 情 

况 下 ， 对 下 载 速度 的 影响 几乎 可 以 忽略 不 计 ) 。 


补充 说 明 一 下 ，Goolge Closure Compiler 还 会 对 全 局 变量 进行 压缩 (在 “高 级 "模式 中 ) ， 这 是 
很 危险 的 ， 且 对 编程 规 部 ee ae ea: 


对 生产 环境 的 脚本 做 压缩 是 相当 重要 的 步骤 ， 它 能 提升 页 面 性 能 ， 你 应 当 使 用 工具 来 完成 压 
缩 。 tn n ， 当 坚 持 使 用 语义 化 的 变量 命名 ， 并 保留 足够 的 空 
格 、 缩 进 和 注释 。 你 写 的 代码 是 需要 被 人 阅读 的 ， 所 以 应 当 将 注意 力 放 在 代码 可 读 性 和 可 维 
护 性 上 ， 代 码 压 缩 的 工作 交 给 工具 去 完成 。 


运行 JSLint 


在 上 一 章 我 们 已 经 介绍 了 JSLint， 这 里 我 们 介绍 更 多 的 使 用 场景 。 对 你 的 代码 进行 JSLint 检 查 
是 非常 好 的 编程 习惯 ， 你 应 该 相信 这 一 点 。 


JSLint 的 检查 点 都 有 哪些 呢 ? 它 会 对 本 章 讨 论 过 的 一 些 模式 〈 单 var 模 式 、parselnt() 的 第 二 
参数 、 总 是 使 用 花 括号 ) 做 检查 。JSLint 还 包括 其 他 方面 的 检查 : 


© 不 可 达 代 码 

在 使 用 变量 之 前 需要 声明 
全 的 UTF 字 符 

使 用 void、with、 和 eval 

无 法 正确 解析 的 正则 表达 式 


JSLint 是 基于 JavaScript 实 现 的 ( 它 是 可 以 通过 JSLint 检 查 的 ) ， 它 提供 了 在 线 工 具 ， 也 可 以 
下 载 使 用 ， 可 以 运行 于 很 多 种 平台 的 JavaScript 解 析 器 。 你 可 以 将 源码 下 载 后 在 本 地 运行 ， 支 
持 的 环境 包括 WSH (Windows Scripting Host ， Windows) ` JSC (JavaScriptCore > 
MacOSX) 或 Rhino (Mozilla 开 发 的 JavaScript 引 擎 ) ° 


可 以 将 JSLint 下 载 后 和 你 的 代码 编辑 器 配置 在 一 起 ， 着 是 一 个 不 错 的 注意 ， 这 样 每 次 你 保存 代 
码 的 时 候 都 会 自动 执行 代码 检查 (比如 配置 快捷 键 ) 。 


本 章 我 们 讲解 了 编写 可 维护 性 代码 的 含义 ， 本 章 的 讨论 非常 重要 ， 它 不 仅 关 系 着 软件 项 目的 
成 功 与 否 ， 还 关系 到 参与 项 目的 工程 师 的 “精神 健康 "和 "幸福 指数 "。 随 后 我 们 讨论 了 一 些 最 佳 
实践 和 模式 ， 它 们 包括 : 

。 减少 全 局 对 象 ， 最 好 每 个 应 用 只 有 一 个 全 局 对 象 

© 函数 都 使 用 单 var 模 式 来 定义 ， 这 样 可 以 将 所 有 的 变量 放 在 同一 个 地 方 声明 ， 同 时 可 以 避 
免 * 声 明 提前 "给 程序 逻辑 带 来 的 影响 。 
for 循 环 、for-in 循 环 、switch 语 句 、“ 禁 止 使 用 eval()、 不 要 扩充 内 置 原型 
。 遵守 统一 的 编码 规范 (在 任何 必要 的 时 候 保持 空格 、 缩 进 、 花 括号 和 分 号 ) 和 命名 约定 


(构造 函数 、 普 通 函 数 和 变量 ) 。 


本 章 还 讨论 了 其 他 一 些 和 代码 本 身 无 关 的 实践 ， 这 些 实践 和 编码 过 程 紧 密 相 关 ， 包 括 书 写 注 
释 、 生 成 AP| 文 档 ， 组 织 代码 评审 、 不 要 试图 去 手动 了 “压缩 ”(minify) 代码 而 牺牲 代码 可 读 
性 、 坚 持 使 用 JSLint 来 对 代码 做 检查 。 


第 三 章 直接 量 和 构造 函数 


JavaScript 中 的 直接 量 模式 更 加 简洁 、 富 有 表现 力 ， 且 在 定义 对 象 时 不 容易 出 错 。 本 章 将 对 直 
接 量 展开 讨论 ， 包 括 对 象 、 数 组 和 正则 表达 式 直接 量 ， 以 及 为 什么 要 优先 使 用 它们 而 不 是 

如 Object() 和 Array() 这 些 等 价 的 内 置 构造 器 函数 。 本 章 同 样 会 介绍 JSON 格 式 ， JSON 是 使 
用 数组 和 对 象 直接 量 的 形式 定义 的 一 种 数据 转换 格式 。 本 章 还 会 讨论 自 定 义 构 造 函 数 ， 包 括 
如 何 强制 使 用 new 以 确保 构造 函数 的 正确 执行 。 


本 章 还 会 补充 讲述 一 些 基 础 知识 ， 比 如 内 置 包装 对 象 Number()、String() 和 Boolean()， 以 及 如 
何 将 它们 和 原始 值 (数字 、 字 符 囊 和 布尔 值 ) 比较 。 最 后 ， 快 速 介绍 一 下 Error() 构 造 函 数 的 用 
法 。 


KR DIRS 


我 们 可 以 将 JavaScript 中 的 对 象 简单 的 理解 为 名 值 对 组 成 的 散 列 表 nash table) ， 在 其 他 编 
人 不 管 是 什么 类 型 ， 它 们 都 
是 “属性 ”( properties) ， 属 性 值 同 样 可 以 是 函数 ， 这 时 属性 就 被 称 为 “方法 ”" (methods) 。 


JavaScript 中 自 定义 的 对 象 (AP CL ARR) TN RB eT Eo ARAMA RHA 
性 也 是 可 变 的 。 你 可 以 先 创建 一 个 空 对 象 ， 然 后 在 需要 时 给 它 添 加 功能 。" 对 象 直接 量 写法 
(object literal notation) "是 按 需 创 建 对 象 的 一 种 理想 方式 。 


看 一 下 这 个 例子 : 


// start with an empty object 
var dog = {}; 


// add one property 
dog.name = "Benji"; 


// now add a method 

dog.getName = function () { 
return dog.name; 

J; 


在 这 个 例子 中 ， 我 们 首先 定义 了 一 个 空 对 象 ， 然 后 添加 了 一 个 属性 和 一 个 方法 ， 在 程序 的 生 
命 周 期 内 的 任何 时 刻 都 可 以 : 


1. 更 改 属性 和 方法 的 值 ， 比 如 : 


dog.getName = function () { 
// redefine the method to return 
// a hardcoded value 
return "Fido"; 


2. 完 全 删除 属性 /方法 


delete dog.name; 


3. 添 加 更 多 的 属性 和 方法 


dog.say = function () { 
return "Woof!"; 


dog.fleas = true; 
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面 这 个 例子 所 展示 的 : 


var dog = { 
name: "Benji", 
getName: function () { 
return this.name; 


}; 


在 本 书 中 多 次 提 到 “ 空 对 象 ”(“blank object’ “empty object”) 。 这 只 是 某 种 简称 ， 要 知 
o 上 趴 正 的 空 对 象 ， 理 解 这 一 点 至 关 重 要 。 即 使 最 简单 的 {} 对 象 
含 从 Object.prototype 继 承 来 的 属性 和 方法 。 我 们 提 到 的 “ 空 (empty) 对 象 " 只 是 说 这 个 
ge ， 不 考虑 它 是 否 有 继承 来 的 属性 。 


对 象 直 接 量 语法 


如 果 你 从 来 没有 接触 过 对 象 直 接 量 写法 ， 第 一 次 碰 到 可 能 会 感觉 怪 怪 的 。 但 越 到 后 来 你 就 越 
喜欢 它 。 本 质 上 讲 ， 对 象 直接 量 语法 包括 : 


。 将 对 象 主体 包含 在 一 对 花 括 号 内 ( { and }) e 

。 对 象 内 的 属性 或 方法 之 问 使 用 各 号 分 隔 。 最 后 一 个 名 值 对 后 也 可 以 有 各 号 ， 但 在 IE 下 会 
报错 ， 所 以 尽量 不 要 在 最 后 一 个 属性 或 方法 后 加 去 号 

。 属性 名 和 值 之 问 使 用 冒号 分 隔 

e 如 果 将 对 象 赋值 给 一 个 变量 ， 不 要 忘 了 在 右 括号 } 之 后 补 上 分 号 


通过 构造 函数 创建 对 象 


JavaScript 中 没有 类 的 概念 ， 这 给 JavaScript 带 来 了 极 大 的 灵活 性 ， 因 为 你 不 必 提 前 知晓 关于 
对 象 的 任何 信息 ， 也 不 需要 类 的 “蓝图 ”。 但 JavaScript 同 样 具有 构造 函数 ， 它 的 语法 和 Java 或 
其 他 语言 中 基于 类 的 对 象 创 建 非常 类 似 。 


你 可 以 使 用 自 定义 的 构造 函数 来 创建 实例 对 象 ， 也 可 以 使 用 内 置 构造 函数 来 创建 ， 比 如 
Object()、Date()、String() 等 等 。 


下 面 这 个 例子 展示 了 用 两 种 等 价 的 方法 分 别 创建 两 个 独立 的 实例 对 象 : 


// one way -- using a literal 
var car = {goes: "far"}; 


// another way -- using a built-in constructor 
// warning: this is an antipattern 

var car = new Object(); 

car.goes = "far"; 


从 这 个 例子 中 可 以 看 到 ， 直 接 量 写法 的 一 个 明显 优势 是 ， 它 的 代码 更 少 。“ 创 建 对 象 的 最 佳 模 
式 是 使 用 直接 量 " 还 有 一 个 原因 ， 它 可 以 强调 对 象 就 是 一 个 简单 的 可 变 的 散 列表 ， 而 不 必 一 定 
派生 自 某 个 类 。 


另外 一 个 使 用 直接 量 而 不 是 Object 构造 函数 创建 实例 对 象 的 原因 是 ， 对 象 直 接 量 不 需要 “作用 
RH” (scope resolution) 。 因 为 新 创建 的 实例 有 可 能 包含 了 一 个 本 地 的 构造 函数 ， 当 你 调 
用 Object() 的 时 候 ， 解 析 器 需要 顺 着 作用 域 链 从 当前 作用 域 开 始 查找 ， 直 到 找到 全 局 Object 构 
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获得 对 象 的 构造 器 


创建 实例 对 象 时 能 用 对 象 直接 量 就 不 要 使 用 new Object() 构 造 函 数 ， 但 有 时 你 希望 能 继承 别人 
写 的 代码 ， 这 时 就 需要 了 解构 造 函 数 的 一 个 “特性 ”( 也 是 不 使 用 它 的 另 一 个 原因 ) ， 就 是 
Object() 构 造 函 数 可 以 接收 参数 ， 通 过 参数 的 设置 可 以 把 实例 对 象 的 创建 委托 给 另 一 个 内 置 构 
造 函 数 ， 并 返回 另外 一 个 实例 对 象 ， 而 这 往往 不 是 你 所 希望 的 。 


下 面 的 示例 代码 中 展示 了 给 new Object() 传 入 不 同 的 参数 : 数字 、 字 符 串 和 布尔 值 ， 最 终 得 到 
的 对 象 都 是 由 不 同 的 构造 函数 生成 的 : 


// Warning: antipatterns ahead 


// an empty object 
var 0 = new Object(); 
console.log(o.constructor === Object); // true 


// a number object 

var 0 = new Object(1); 
console.log(o.constructor === Number); // true 
console.log(o.toFixed(2)); // "1.00" 


// a string object 

var 0 = new Object("I am a string"); 
console.log(o.constructor === String); // true 
// normal objects don't have a substring() 

// method but string objects do 
console.log(typeof o.substring); // "function" 


// a boolean object 


var o = new Object(true); 
console.log(o.constructor === Boolean); // true 


Object() 构 造 函 数 的 这 种 特 ， pete Sete 不 到 的 结果 ， 特 别 是 当 参 数 不 确定 的 时 候 。 最 后 
再 次 提醒 不 要 使 用 new Object() > 能 的 使 用 对 象 直接 量 来 创建 实例 对 象 。 


目 定义 构造 函数 


除了 对 象 直 接 量 和 内 置 构造 函数 之 外 ， 你 也 可 以 通过 自 定 义 的 构造 函数 来 创建 实例 对 象 ， 正 
如 下 面 的 代码 所 示 : 


var adam = new Person("Adam") ; 
adam.say(); // "I am Adam" 


这 里 用 了 “类 "Person 创建 了 实例 ， 这 种 写法 看 起 来 很 像 Java 中 的 实例 创建 。 两 者 的 语法 的 确 
非常 接近 ， 但 实际 上 JavaScript 中 没有 类 的 概念 ，Person 是 一 个 函数 。 


Person 构 造 函 数 是 如 何 定 义 的 呢 ? 看 下 面 的 代码 : 


var Person = function (name) { 
this.name = name; 
this.say = function () { 
return "I am " + this.name; 


ten 
}; 
当 你 通过 关键 字 new 来 调用 这 个 构造 函数 时 ， 元 数 体内 将 发 生 这 些 事情 
e 创建 一 个 空 对 象 ， 将 它 的 引用 赋 给 this， 继 承 函 数 的 原型 。 
e 通过 this 将 属性 和 方法 添加 至 这 个 对 象 
。 最 后 返回 this 指 向 的 新 对 象 (如 果 没 有 手动 返回 其 他 的 对 象 ) 
用 代码 表示 这 个 过 程 如 下 : 


var Person = function (name) { 
// create a new object 
// using the object literal 
// var this = {}; 


// add properties and methods 
this.name = name; 
this.say = function () { 

return "I am " + this.name; 


}; 


//return this; 


}; 


正如 这 段 代码 所 示 ，Say() 方 法 添加 至 this 中 ， 结 果 是 ， 不 论 何 时 调用 new Person()， 在 内 存 中 
都 会 创建 一 个 新 函数 (译注 : 所 有 Person 的 实例 对 象 中 的 方法 都 是 独占 一 块 内 存 的 ) 。 显 然 
这 是 效率 很 低 的 ， 因 为 所 有 实例 的 say() 方 法 是 一 模 一 样 的 ， 因 此 没有 必要 "“ 找 贝 "多 份 。 最 好 的 
办 法 是 将 方法 添加 至 Person 的 原型 中 。 

Person.prototype.say = function () { 


return "I am " + this.name; 


ten 


我 们 将 会 在 下 一 章 里 详细 讨论 原型 和 继承 。 现 在 只 要 记 住 将 需要 重用 的 成 员 和 方法 放 在 原型 
里 即 可 。 


关于 构造 函数 的 内 部 工作 机 制 也 会 在 后 续 章 节 中 有 更 细致 的 讨论 。 这 里 我 们 只 做 概要 的 介 
绍 。 刚 才 提 到 ， 构 造 函 数 执 行 的 时 候 ， 首 先 创 建 一 个 新 对 象 ， 并 将 它 的 引用 赋 给 this : 


// var this = {}; 


事实 并 不 完 这 样 ， 因 为 “ 空 " 对 象 并 不 是 卜 的 空 ， 这 个 对 象 继 承 了 Person 的 原型 ， 看 起 来 更 
像 : 


// var this = Object.create(Person.prototype); 
在 后 续 章 节 会 进一步 讨论 Object.create()。 


构造 函数 的 返回 值 


用 new 调 用 的 构造 函数 总 是 会 返回 一 个 对 象 ， 上 默认 返回 this 所 指向 的 对 象 。 如 果 构 造 函 数 内 没 
有 给 this 赋 任何 属性 ， 则 返回 一 个 “ 空 "对 象 (除了 继承 构造 函数 的 原型 之 外 ， 没 有 “自己 的 " 属 
性 ) 。 


尽管 我 们 不 会 在 构造 函数 内 写 return 语 句 ， 也 会 隐 式 返回 this。 但 我 们 是 可 以 返回 任意 指定 的 
对 象 的 ， 在 下 面 的 例子 中 就 返回 了 新 创建 的 that 对 象 。 


var Objectmaker = function () { 


// this ~name~ property will be ignored 

// because the constructor 

// decides to return another object instead 
this.name = "This is it"; 


// creating and returning a new object 
var that = {}; 

that.name = "And that's that"; 

return that; 


}; 


// test 
var 0 = new Objectmaker(); 
console.log(o.name); // "And that's that" 


我 们 看 到 ， 构 造 函 数 中 其 实 是 可 以 返回 任意 对 象 的 ， 只 要 你 返回 的 东西 是 对 象 即 可 。 如 果 返 
回 值 不 是 对 象 (字符 串 、 数 字 或 布尔 值 ) ， 程 序 不 会 报错 ， 但 这 个 返回 值 被 忽略 ， 最 终 还 是 
返回 this 所 指 的 对 象 。 


强制 使 用 new 的 模式 


我 们 知道 ， 构 造 函 数 和 普通 的 函数 无 异 ， 只 是 通过 new 调 用 而 已 。 那 么 如 果 调 用 构造 函数 时 忘 

记 new 会 发 生 什 么 呢 ? 漏 掉 new 不 会 产生 语法 错误 也 不 会 有 运行 时 错误 ， 但 可 能 会 造成 逻辑 错 

误 ， 导 致 执行 结果 不 符合 预期 。 这 是 因为 如 果 不 写 new 的 话 ， 元 数 内 的 this 会 指向 全 局 对 象 
(在 浏览 器 端 this 指 向 window) 。 


当 构 造 函 数 内 包含 this.member 之 类 的 代码 ， 并 直接 调用 这 个 函数 (省略 hnew) ， 实 际会 创建 
一 个 全 局 对 象 的 属性 member， 可 以 通过 window.member 或 member 访 问 到 它 。 这 必然 不 是 我 
们 想 要 的 结果 ， 因 为 我 们 要 努力 确保 全 局 命名 空间 的 整洁 干净 。 


// constructor 

function waffle() { 
this.tastes = "yummy"; 

} 


// a new object 

var good_morning = new waffle(); 
console.log(typeof good_morning); // "object" 
console.log(good_morning.tastes); // "yummy" 


// antipattern: 

// forgotten “new” 

var good_morning = Waffle(); 

console.log(typeof good_morning); // "undefined" 
console.log(window.tastes); // "yummy" 


ECMAScript5 中 修正 了 这 种 非 正 常 的 行为 逻辑 。 在 严格 模式 中 ，this 是 不 能 指向 全 局 对 象 的 。 
如 果 在 不 支持 ES5 的 JavaScript 环 境 中 ， 仍 然后 很 多 方法 可 以 确保 构造 函数 的 行为 即便 在 省 略 
new 调 用 时 也 不 会 出 问题 。 


命名 约定 


最 简单 的 选择 是 使 用 命名 约定 ， 前 面 的 章节 已 经 提 到 ， 构 造 泡 数 名 首 字母 大 写 
(MyConstructor) ， 普 通 函 数 和 方法 名 首 字母 小 写 (myFunction) ° 


使 用 that 


遵守 命名 约定 的 确 能 帮 上 一 些 忙 ， 但 约定 毕竟 不 是 强制 ， 不 能 完全 避免 出 错 。 这 里 给 出 了 一 
种 模式 可 以 确保 构造 函数 一 定 会 按照 构造 函数 的 方式 执行 。 不 要 将 所 有 成 员 挂 在 this 上 ， 将 它 
们 挂 在 that 上 ， 并 返回 that 。 


function Waffle() { 

var that = {}; 
that.tastes = "yummy"; 
return that; 


如 果 要 创建 简单 的 实例 对 象 ， 甚 至 不 需要 定义 一 个 局 部 变量 that， 可 以 直接 返回 一 个 对 象 直 接 
量 ， 就 像 这 样 : 


function Waffle() { 
return { 
tastes: "yummy" 


}; 


不 管用 什么 方式 调用 它 (使 用 new 或 直接 调用 ) ， 它 同 都 会 返回 一 个 实例 对 象 : 


var first = new Waffle(), 

second = Waffle(); 
console.log(first.tastes); // "yummy" 
console.log(second.tastes); // "yummy" 


这 种 模式 的 问题 是 丢失 了 原型 ， 因 此 在 Waffle() 的 原型 上 的 成 员 不 会 继承 到 这 些 实例 对 象 中 。 


需要 注意 的 是 ， 这 里 用 的 that 只 是 一 种 命名 约定 ，that 不 是 语言 的 保留 字 ， 可 以 将 它 替换 
为 任何 你 喜欢 的 名 字 ， 比 如 self 或 me。 


调用 自身 的 构造 函数 


为 了 解决 上 述 模式 的 问题 ， 能 够 让 实例 对 象 继承 原型 属性 ， 我 们 使 用 下 面 的 方法 。 在 构造 子 
数 中 首先 检查 this 是 否 是 构造 函数 的 实例 ， 如 果 不 是 ， 再 通过 new 调 用 构造 总数， 并 将 new 的 
结果 返回 : 


function Waffle() { 


if (!(this instanceof Waffle)) { 
return new Waffle(); 


this.tastes = "yummy"; 


Wwaffle.prototype.wantAnother = true; 
// testing invocations 
var first = new wWaffle(), 

second = Waffle(); 


console.log(first.tastes); // "yummy" 
console.log(second.tastes); // "yummy" 


console.log(first.wantAnother); // true 
console.log(second.wantAnother); // true 


另 一 种 检查 实例 的 通用 方法 是 使 用 arguments.callee， 而 不 是 直接 将 构造 函数 名 写 死 在 代码 


if (!(this instanceof arguments.callee)) { 
return new arguments.callee(); 
} 


这 里 需要 说 明 的 是 ， 在 任何 函数 内 部 都 会 自行 创建 一 个 arguments 对 象 ， 它 包含 函数 调用 时 传 
入 的 参数 。 同 时 arguments 包 侈 一 个 callee 属 性 ， 指 向 它 所 在 的 正在 被 调用 的 函数 。 需 要 注 
意 ，ES5 严 格 模式 中 是 Te auren callee 的 ， 因 此 最 好 对 它 的 使 用 加 以 限制 ， 并 删除 
任何 你 能 在 代码 中 找到 的 实例 (译注 : 这 里 作者 的 表述 很 委婉 ， 其 实 作者 更 倾向 于 全 面 禁止 
使 用 arguments.callee) 。 


数组 直接 量 


和 其 他 的 大 多 数 一 样 ，JavaScript 中 的 数组 也 是 对 象 。 可 以 通过 内 置 构造 函数 Array() 来 创建 数 
组 ， 类 似 对 象 直接 量 ， 数 组 也 可 以 通过 直接 量 形式 创建 。 而 且 更 推荐 使 用 直接 量 创建 数组 。 


这 里 的 实例 代码 给 出 了 创建 两 个 具有 相同 元 素 的 数组 的 两 种 方法 ， 使 用 Array() 和 使 用 直接 量 
模式 : 

// array of three elements 

// warning: antipattern 

var a = new Array("itsy", "bitsy", "spider"); 


// the exact same array 
var a = ["itsy", "bitsy", "spider"]; 


console.log(typeof a); // "object", because arrays are objects 
console.log(a.constructor === Array); // true 


数组 直接 量 语法 
数组 直接 量 写 法 非常 简单 : 整个 数组 使 用 方 括号 括 起 来 ， 数 组 元 素 之 间 使 用 运 号 分 隔 。 数 组 
元 素 可 以 是 任意 类 型 ， 也 和 包括 数组 和 对 象 。 


数组 直接 量 语法 简单 直接 、 高 雅美 观 。 毕 竞 数 组 只 是 从 位 置 0 开 始 索 引 的 值 的 集合 ， 完 全 没 必 
要 包含 构造 器 和 new 运 算 符 的 内 容 (代码 会 更 多 ) ， 保 持 简 单 即 可 。 


有 意 RENON 思 的 数组 构造 器 


我 们 对 new Array() 敦 而 远 之 原因 是 为 了 避免 构造 函数 带 来 的 陷阱 。 


如 果 给 Array() 构 造 器 传 入 一 个 数字 ， 这 个 数字 并 不 会 成 为 数组 的 第 一 个 元 素 ， 而 是 设置 数组 
的 长 度 。 也 就 是 说 ，new Array(3) 创 建 了 一 个 长 度 为 3 的 数组 ， 而 不 是 某 个 元 素 是 3。 如 果 你 访 
问 数组 的 任意 元 素 都 会 得 到 undefined， 因 为 元 素 并 不 存在 。 下 面 示例 代码 展示 了 直接 量 和 构 
造 函 数 的 区 别 : 


// an array of one element 
var a = [3]; 
console.log(a.length); // 1 
console.log(a[0]); // 3 


// an array of three elements 

var a = new Array(3); 
console.log(a.length); // 3 
console.log(typeof a[0]); // "undefined" 


或 许 上 面 的 ; 情况 看 起 来 还 不 算是 太 严 重 的 问题 ， 但 当 new Array() 的 参数 是 一 个 浮 点 数 而 不 
是 整数 时 则 会 导致 严重 的 错误 ， 这 是 因为 数组 的 长 度 不 可 能 是 浮 点 数 。 


// using array literal 
var a = [3.14]; 
console.log(a[0]); // 3.14 


var a = new Array(3.14); // RangeError: invalid array length 
console.log(typeof a); // "undefined" 


为 了 避免 在 运行 时 动态 创建 数组 时 出 现 这 种 错误 ， 强 烈 推 荐 使 用 数组 直接 量 来 代替 new 
Array() ° 


有 些 人 用 Array() 构 造 器 来 做 一 些 有 意思 的 事情 ， 比 如 用 来 生成 重复 字符 串 。 下 面 这 行 代 
码 返 字符 囊 包 含 255 个 空格 (请 读 ee 不 是 256 个 空 


格 ) ° var white = new Array(256).join(' '); 


检查 是 不 是 数组 
如 果 typeof 的 操作 数 是 数组 的 话 ， 将 返回 “object”。 


console.log(typeof [1, 2]); // "object" 


这 个 结果 勉强 说 得 过 去 ， 毕 竟 数 组 是 一 种 对 象 ， 但 对 我 们 用 处 不 大 。 往 往 你 需要 知道 一 个 值 
是 不 是 丫 正 的 数组 。 你 可 能 见 到 过 这 种 检查 数组 的 方法 ; 检查 length 属 性 、 检 查 数 组 方法 比如 
slice() 等 等 。 但 这 些 方法 非常 脆弱 ， 非 数组 的 对 象 也 可 以 拥有 这 些 同名 的 属性 。 还 有 些 人 使 用 
instanceof Array 来 判断 数组 ， 但 这 种 方法 在 某 些 版 本 的 上 里 的 多 个 iframe 的 场景 中 会 出 问题 

(译注 : 原因 就 是 在 不 同 iframe 中 创建 的 数组 不 会 相互 共享 其 prototype 属 性 ) 。 


ECMAScript 5 定义 了 一 个 新 的 方法 Array.isArray()， 如 果 参 数 是 数组 的 话 就 返回 true。 比 如 : 


Array.isArray([]); // true 


// trying to fool the check 
// with an array-like object 
Array.isArray({ 

length: 1, 

"o": 1, 

slice: function () {} 
3); // false 


如 果 你 的 开发 环境 不 支持 ECMAScript5， 可 以 通过 Object.prototype.toString() 方 法 来 代替 。 如 
调用 toString 的 call() 方 法 并 传 入 数组 上 下 文 ， 将 返回 字符 串 “[object Array] ° w Rik Aat RE 
下 文 ， 则 返回 字符 串 “[object Object]j”。 因 此 可 以 这 样 做 : 


if (typeof Array.isArray === "undefined") { 
Array.isArray = function (arg) { 
return Object.prototype.toString.call(arg) === "[object Array]"; 
J; 
} 


JSON 


上 文 我 们 刚刚 讨论 过 对 象 和 数组 直接 量 ， 你 已 经 对 此 很 熟悉 了 ， 现 在 我 们 将 目光 转向 JSON 。 
JSON (JavaScript Object Notation) 是 一 种 轻 量 级 的 数据 交换 格式 。 很 多 语言 中 都 实现 了 
JSON， 特 别 是 在 JavaScript 中 。 


JSON 格 式 及 其 简单 ， 它 只 是 数组 和 对 象 直接 量 的 混合 写法 ， 看 一 个 JSON 字 符 串 的 例子 


{"name": "value", "some": [1, 2, 3]} 


JSON 和 对 象 直 接 量 在 语法 上 的 唯一 区 别 是 ， 合 法 的 JSON 属 性 名 均 用 引号 包含 。 而 在 对 象 直 
接 量 中 ， 只 有 属性 名 是 非法 的 标识 符 时 采用 引号 包含 ， 比 如 ， 属 性 名 中 包含 空 


格 {"first name": "Dave"} ° 


在 JSON 字 符 串 中 ， 不 能 使 用 函数 和 正则 表达 式 直接 量 。 


使 用 JSON 


在 前 面 的 章节 中 讲 到 ， 出 于 安全 考虑 ， 不 推荐 使 用 eval() 来 “粗糙 的 "解析 JSON 字 符 串 。 最 好 使 
用 JSON.parse() 方 法 ，ES5 中 已 经 包含 了 这 个 方法 ， 而 且 在 现代 浏览 器 的 JavaScript 引 擎 中 已 
经 内 置 支持 JSON 了 。 对 于 老 昌 的 JavaScript 引 擎 来 说 ， 你 可 以 使 用 JSON.org 所 提供 的 JS 文 件 
(http://www.json.org/json2.js) 来 获得 JSON 对 象 和 方法 。 
// an input JSON string 
var jstr = '{"mykey": "my value"}'; 


// antipattern 
var data = eval('(' + jstr + ')'); 


// preferred 
var data = JSON.parse(jstr); 


console.log(data.mykey); // "my value" 


如 果 你 已 经 在 使 用 某 个 JavaScript 库 了 ， 很 可 能 库 中 提供 了 解析 JSON 的 方法 ， 就 不 必 再 额外 
引入 JSON.org 的 库 了 ， 比 如 ， 如 果 你 已 经 使 用 了 YUI3， 你 可 以 这 样 : 


// an input JSON string 
var jstr = '{"mykey": "my value"}'; 
// parse the string and turn it into an object 
// using a YUI instance 
YUI().use('json-parse', function (Y) { 
var data = Y.JSON.parse(jstr); 
console.log(data.mykey); // "my value" 


3); 


如 果 你 使 用 的 是 jQuery， 可 以 直接 使 用 它 提 供 的 parseJSON() 方 法 : 
// an input JSON string 
var jstr = '{"mykey": "my value"}'; 


var data = jQuery.parseJSON(jstr); 
console.log(data.mykey); // "my value" 


和 JSON.parse() 方 法 相对 应 的 是 JSON.stringify()。 它 将 对 象 或 数组 〈 或 任何 原始 值 ) 转换 为 
JSON 字 符 串 。 
var dog = { 
name: "Fido", 
dob:new Date(), 
legs:[1,2,3,4] 
3; 
var jsonstr = JSON.stringify(dog); 


// jsonstr is now: 
// {"name":"Fido", "dob":"2010-04-11T22:36:22.436Z","legs":[1,2,3,4]} 


正则 表达 式 直接 量 
JavaScript 中 的 正则 表达 式 也 是 对 象 ， 可 以 通过 两 种 方式 创建 它们 : 


e 使 用 new RegExp() 构 造 函 数 
o 使 用 正则 表达 式 直接 量 


下 面 的 示例 代码 展示 了 创建 正则 表达 式 的 两 种 方法 ， 创 建 的 正则 用 来 匹配 一 个 反 针 杠 〈\) 
// regular expression literal 
var re = /\\/gm; 


// constructor 
var re = new RegExp("\\\\", "gm"); 


显然 正则 表达 式 直 接 量 写 法 的 代码 更 短 ， 且 不 必 强 制 按照 类 构造 器 的 思路 来 写 。 因 此 更 推荐 
使 用 直接 量 写 法 。 


另外 ， 如 果 使 用 RegExp() 构 造 函 数 写法 ， 还 需要 考虑 对 引号 和 反 斜 杠 进行 转 义 ， 正 如 上 段 代 
码 所 示 的 那样 ， 用 了 四 个 反 斜 杠 来 匹配 一 个 反 斜 杠 。 这 会 增加 正则 表达 式 的 长 度 ， 而 且 让 正 
则 变 得 难于 理解 和 维护 。 刚 开始 学 习 正 则 表达 式 不 是 很 容易 ， 所 以 不 要 放弃 任何 一 个 简化 它 
们 的 机 会 ， 所 以 要 尽量 使 用 直接 量 而 不 是 通过 构造 函数 来 创建 正则 。 


正则 表达 式 直接 量 语法 


正则 表达 式 直接 量 使 用 两 个 斜 线 包 衰 起 来 ， 正 则 的 主体 部 分 不 包括 两 端的 人 针线。 在 第 二 个 儿 
线 之 后 可 以 指定 模式 匹配 的 修饰 符 用 以 高 级 匹配 ， 修 饰 符 不 需要 引号 引起 来 ，JavaScript 中 有 
三 个 修饰 符 : 


。 g， 全 局 匹配 
em， 多 行 匹 配 
e ji， 忽略 大 小 写 的 匹配 


修饰 符 可 以 自由 组 合 ， 而 且 顺 序 无 关 : 


var re = /pattern/gmi; 


使 用 正则 表达 式 直 接 量 可 以 让 代码 更 加 简洁 高 效 ， 比 如 当 调 用 String.prototype.prelace() 方 法 
时 ， 可 以 传 入 正则 表达 式 参数 : 


var no_letters = "abci23XYZ".replace(/[a-z]/gi, ""); 
console.log(no_letters); // 123 


有 一 种 不 得 不 使 用 new RegExp() 的 情形 ， 有 时 正则 表达 式 是 不 确定 的 ， 直 到 运行 时 才能 确定 
下 来 。 


正则 表达 式 直接 量 和 Regexp() 构 造 函 数 的 另 一 个 区 别 是 ， 正 则 表达 式 直接 量 只 在 解析 时 创建 
一 次 正则 表达 式 对 象 (译注 : 多 次 解析 同一 个 正则 表达 式 ， 会 产生 相同 的 实例 对 象 ) 。 如 果 
在 循环 体内 反复 创建 相同 的 正则 表达 式 ， 则 每 个 正则 对 象 的 所 有 属性 (比如 lastlndex) 只 会 
设置 一 次 (译注 : 由 于 每 次 创建 相同 的 实例 对 象 ， 每 个 循环 中 的 实例 对 象 都 是 同一 个 ， 属 性 

也 自然 相同 ) ， 下 面 这 个 例子 展示 了 两 次 都 返回 了 相同 的 正则 表达 式 的 情形 (译注 : 这 里 作 
者 的 表述 只 是 针对 ES3 规 范 而 言 ， 下 面 这 段 代码 在 NodeJS、IE6-IE9、 isos 、 
Chrome10、Safari5 中 运行 结果 和 作者 描述 的 不 一 致 ，Firefox 3.6 中 的 运行 结果 和 作者 描述 是 
一 致 的 ， 原 因 可 以 在 ECMAScript5 规 范 第 24 页 和 第 247 页 找到 ， ee ee ae 
中 ， 用 正则 表达 式 创 建 的 RegExp 对 象 会 共享 同一 个 实例 ， 而 在 ECMAScript5 中 则 是 两 个 独立 
的 实例 。 而 最 新 的 Firefox4、Chrome 和 Safari5 都 遵循 ECMAScript5 标 准 ， 至 于 IE6-IE8 都 没有 
很 好 的 遵循 ECMAScript3 标 准 ， 不 过 在 这 个 问题 上 反而 处 理 对 了 。 很 明显 ECMAScript5 的 规 
范 更 符合 开发 者 的 期 望 ) © 


function getRE() { 
var re = /[a-z]/; 
re.foo = "bar"; 
return re; 


} 
var reg = getRE(), 

re2 = getRE(); 
console.log(reg === re2); // true 
reg.foo = "baz"; 


console.log(re2.f00); // "baz" 


在 ECMAScript5 中 这 种 情形 有 所 改变 ， 相 同 正 则 表达 式 直接 量 的 每 次 计算 都 会 创建 新 的 
实例 对 象 ， 目 前 很 多 现代 览 器 也 对 此 做 了 纠正 (译注 : 比如 在 Firefox4 就 纠正 了 
Firefox3.6 的 这 种 “错误 ” 


后 需要 提 一 点 ， 不 带 new 调 用 RegExp() (作为 普通 的 函数 ) 和 带 new 调 用 RegExp() 是 完全 
一 样 的 。 
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JavaScript 中 有 五 种 原始 类 型 : 数字 、 字 符 串 、 布 尔 值 、null 和 undefined。 除 了 null 和 
Undefined 之 外 ， 其 他 三 种 都 有 对 应 的 “包装 对 象 " (wrapper objects) 。 可 以 通过 内 置 构造 函 
数 来 生成 包装 对 象 ，Number()、String()、 和 Boolean()。 


为 了 说 明 数字 原始 值 和 数字 对 象 之 间 的 区 别 ， 看 一 下 下 面 这 个 例子 : 


// a primitive number 
var n = 100; 
console.log(typeof n); // "number" 


// a Number object 
var nobj = new Number(100); 
console.log(typeof nobj); // "object" 


包装 对 象 带 有 一 些 有 用 的 属性 和 方法 ， 比 如 ， 数 字 对 象 就 带 有 toFixed() 和 toExponential() 之 类 
的 方法 。 字 符 串 对 象 带 有 substring()、chatAt() 和 toLowerCase() 等 方法 以 及 length 属 性 。 这 些 
方法 非常 方便 ， 和 原始 值 相 比 ， 这 让 包装 对 象 具 备 了 一 定 优势 。 其 实 原始 值 也 可 以 调用 这 些 
方法 ， 因 为 原始 值 会 首先 转换 为 一 个 临时 对 象 ， 如 果 转 换 成 功 ， 则 调用 包装 对 象 的 方法 。 


// a primitive string be used as an object 
var s = "hello"; 
console.log(s.toUpperCase()); // "HELLO" 


// the value itself can act as an object 
"monkey".slice(3, 6); // "key" 


// same for numbers 
(22 / 7).toPrecision(3); // "3.14" 


因为 原始 值 可 以 根据 需要 转换 成 对 象 ， 这 样 的 话 ， 也 不 必 为 了 用 包装 对 象 的 方法 而 将 原始 值 
手动 "包装 ”成 对 象 。 比 如 ， 不 必 使 用 new String("hi")， 直 接 使 用 "hi" 即 可 。 


// avoid these: 

var s = new String("my string"); 
var n new Number(101); 

var b new Boolean(true); 


// better and simpler: 


var s = "my string"; 
var n = 101; 
var b = true; 


不 得 不 使 用 包装 对 象 的 一 个 原因 是 ， 有 时 我 们 需要 对 值 进行 扩充 并 保持 值 的 状态 。 原 始 值 毕 
竞 不 是 对 象 ， 不 能 直接 对 其 进行 扩充 (译注 : 比如 1.property = 2 会 报错 ) ° 


// primitive string 

var greet = "Hello there"; 

// primitive is converted to an object 
// in order to use the split() method 
greet.split(' ')[0]; // "Hello" 


// attemting to augment a primitive is not an error 
greet.smile = true; 


// but it doesn't actually work 
typeof greet.smile; // "undefined" 


在 这 段 示例 代码 中 ，greet 只 是 临时 转换 成 了 对 象 ， 以 保证 访问 其 属性 /方法 时 不 会 出 错 。 另 一 

方面 ， 如 果 greet 通 过 new D p ， 那么 扩充 smile 属 性 就 会 按照 期 望 的 那样 

执行 。 对 字符 串 、 数 字 或 布尔 值 的 扩充 并 不 常见 ， 除 非 你 清楚 自己 想 要 什么 ， 否 则 不 必 使 用 
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当 省 略 new 时 ， 包 装 器 将 传 给 它 的 参数 转换 为 原始 值 : 


typeof Number(1); // "number" 

typeof Number("1"); // "number" 

typeof Number(new Number()); // "number" 
typeof String(1); // "string" 

typeof Boolean(1); // "boolean" 


Error 对 象 


JavaScript 中 有 很 多 内 置 的 Error 构 造 函 数 ， 比 如 Error()、SyntaxError()，TypeError() 等 等 ， 这 
些 “ 错 误 " 通 常 和 throw 语 句 一 起 使 用 。 这 些 构造 函数 创建 的 错误 对 象 包含 这 些 属 性 
name 


name 届 性 是 指 创建 这 个 对 象 的 构造 函数 的 名 字 ， 通 常 是 “Errora”， 有 时 会 有 特定 的 名 字 比 
如 “RangeError” 


message 
创建 这 个 对 象 时 传 入 构造 函数 的 字符 囊 


着 误 对 象 还 有 其 他 一 些 属性 ， 比 如 产生 错误 的 行 号 和 文件 名 ， 但 这 些 属性 是 浏览 器 自行 实现 
的 ， 不 同 浏览 器 的 实现 也 不 一 致 ， 因 此 出 于 兼容 性 考虑 ， 并 不 推荐 使 用 这 些 属性 。 


另 一 方面 ，throw 可 以 抛 出 任何 对 象 ， 并 不 限于 "错误 对 象 "， 因 此 你 可 以 根据 需要 抛 出 自 定 义 
的 对 象 。 这 些 对 象 包 钨 属性 “name" 和 “message" 或 其 他 你 希望 传递 给 异常 处 理 逻 辑 的 信息 ， 异 
常 处 理 逻 辑 由 catch 语 名 指定 。 你 可 以 灵活 运用 抛 出 的 错误 对 象 ， 将 程序 从 错误 状态 恢复 至 正 
常 状态 。 


try { 
// something bad happened, throw an error 
throw { 
name: "MyErrorType", // custom error type 
message: "oops", 
extra: "This was rather embarrassing", 
remedy: genericErrorHandler // who should handle it 
J; 


} catch (e) { 
// inform the user 
alert(e.message); // "oops" 


// gracefully handle the error 
e.remedy(); // calls genericErrorHandler() 
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在 本 章 里 ， 我 们 讨论 了 多 种 直接 量 模式 ， 它 们 是 使 用 构造 函数 写法 的 替代 方案 ， 本 章 讲 述 了 
这 些 内 容 : 
e。 HRA EK 
括号 包装 起 来 
e 构造 函数 一 一 内 置 构造 函数 (ARH SRARRAT OH BES) 和 自 定 义 构 造 
o 一 种 强制 函数 以 构造 函数 的 模式 执行 (不 管用 不 用 new 调 用 构造 函数 ， 都 始终 返回 new 出 
来 的 实例 ) 的 技巧 
。 数组 直接 量 写 法 一 一 数组 元 素 之 间 使 用 过 号 分 隔 ， 通 过 方 括号 括 起 来 
© JSON 一 一 是 一 种 轻 量 级 的 数据 交换 格式 
。 正则 表达 式 直 接 量 
oi 他 的 内 置 构造 函数 : String()、Number()、Boolean() 以 及 不 同 种 类 的 Error() 构 





一 种 简洁 优雅 的 定义 对 象 的 方法 ， 名 值 对 之 间 用 各 号 分 隔 ， 通 过 论 
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通常 除了 Date() 构 造 函 数 之 外 ， 

以 及 它们 的 直接 量 语法 做 了 整理 。 
内 置 构造 函数 (不 推荐 ) 
var o = new Object(); 
var a = new Array(); 


var re = new RegExp("[a- 
z]", " g"); 


var s = new String(); 
var n = new Number(); 


var b = new Boolean(); 


throw new Error("uh-oh"); 


其 他 的 内 置 构造 函数 并 不 常用 ， 下 面 的 表格 中 对 这 


直接 量 语 法 和 原始 值 (推荐 ) 
var o = {}; 
var a = []; 
var re = /[a-z]/g; 


vars= 
var n = 0; 
var b = false; 


throw { name: "Error", message: "uh-oh"}; & # throw 
Error("uh-oh"); 


熟练 运用 函数 是 JavaScript 程 序 员 的 必 备 技能 ， 因 为 在 JavaScript 中 函数 实在 是 太 常 用 了 。 它 
能 够 完成 的 任务 种 类 非常 之 多 ， 而 在 其 他 语言 中 则 需要 很 多 特殊 的 语法 支持 才能 达到 这 种 能 
力 。 


在 本 章 将 会 介绍 在 JavaScript 中 定义 函数 的 多 种 方式 ， 包 括 函 数 表达 式 和 函数 声明 、 以 及 局 部 
作用 域 和 变量 声明 提前 的 工作 原理 。 然 后 会 介绍 一 些 有 用 的 模式 ， 帮 助 你 设计 API (ARH 
数 提供 更 好 的 接口 )、 搭 建 代 码 架 构 ( 使 用 尽 可 能 少 的 全 局 对 象 ) 、 并 优化 性 能 〈 避 免 不 必 
要 的 操作 ) 。 


现在 让 我 们 来 一 起 揭秘 JavaScript 骂 数 ， 我 们 首先 从 一 些 背 景 知识 开始 说 起 。 


JavaScript 的 函数 具有 两 个 主要 特性 ， 正 是 这 两 个 特性 让 它们 与 众 不 同 。 第 一 个 特性 是 ， 函 数 
是 一 等 对 象 (first-class object) ， 第 二 个 是 函数 提供 作用 域 支持 。 


HHH Re MBA: 


e 可 以 在 程序 执行 时 动态 创建 函数 

。 可 以 将 函数 赋值 给 变量 ， 可 以 将 函数 的 引用 找 贝 至 另 一 个 变量 ， 可 以 扩充 函数 ， 除 了 某 
些 特殊 场景 外 均 可 被 删除 。 

© 可 以 将 函数 作为 参数 传 入 另 一 个 子 数 ， 也 可 以 被 当 作 返 回 值 返回 。 

。 函数 可 以 包含 自己 的 属性 和 方法 


对 于 一 个 函数 A 来 说 ， 首 先 它 是 对 象 ， 拥 有 属性 和 方法 ， 其 中 某 个 属性 碰巧 是 另 一 个 函数 B， 
B 可 以 接受 函数 作为 参数 ， 假 设 这 个 函数 参数 为 C， 当 执行 B 的 时 候 ， 返 回 另 一 个 函数 D。 乍 一 
看 这 里 有 一 大 堆 相互 关联 的 函数 。 当 你 开始 习惯 函数 的 许多 用 法 时 ， 你 会 惊叹 原来 函数 是 如 
此 强大 、 灵 活 并 富有 表现 力 。 通 常 说 来 ， 一 说 到 JavaScript 的 函数 ， 我 们 首先 认为 它 是 对 象 ， 
它 具 有 一 个 可 以 “执行 "的 特性 ， 也 就 是 说 我 们 可 以 “调用 "这 个 函数 。 


我 们 通过 new Function() 构 造 器 来 生成 一 个 函数 ， 这 时 可 以 明显 看 出 函数 是 对 钥 : 


// antipattern 

// for demo purposes only 

var add = new Function('a, b', ‘return a + b'); 
add(1, 2); // returns 3 


在 这 段 代码 中 ， 毫 无 疑问 add() 是 一 个 对 象 ， 毕 竞 它 是 由 构造 函数 创建 的 。 这 里 并 不 推荐 使 用 
Function() 构 造 器 创建 函数 (和 eval() 一 样 糟糕 ) ， 因 为 程序 逻辑 代码 是 以 字符 串 的 形式 传 入 
构造 器 的 。 这 样 的 代码 可 读 性 差 ， 写 起 来 也 很 费劲 ， 你 不 得 不 对 逻辑 代码 中 的 引号 做 转 义 处 


理 ， 并 需要 特别 关注 为 了 让 代码 保持 一 定 的 可 读 性 而 保留 的 空格 和 缩 进 。 


函数 的 第 二 个 重要 特性 是 它 能 提供 作用 域 支持 。 在 JavaScript 中 没有 块 级 作用 域 (译注 : 在 
JavaScript1.7 中 提供 了 块 级 作用 域 部 分 特性 的 支持 ， 可 以 通过 |et 来 声明 块 级 作用 域内 的 “局 部 
变量 ") ， 也 就 是 说 不 能 通过 花 括号 来 创建 作用 域 ，JavaScript 中 只 有 函数 作用 域 (译注 : 这 
里 作者 的 表述 只 针对 函数 而 言 ， 此 外 JavaScript 还 有 全 局 作用 域 ) 。 在 函数 内 所 有 通过 Var 声 
明 的 变量 都 是 局 部 变量 ， 在 函数 外 部 是 不 可 见 的 。 刚 才 所 指 花 括号 无 法 提供 作用 域 支持 的 意 
思 是 说 ， 如 果 在 计 条 件 名 内 、 或 在 for 或 while 循 环 体内 用 var 定 义 了 变量 ， 这 个 变量 并 不 是 属于 if 
语句 或 for (while) 循环 的 局 部 变量 ， 而 是 属于 它 所 在 的 函数 。 如 果 不 在 任何 函数 内 部 ， 它 会 
成 为 全 局 变量 。 在 第 二 章 里 提 到 我 们 要 减少 对 全 局 命名 空间 的 污染 ， 那 么 使 用 函数 则 是 控制 
变量 的 作用 域 的 不 二 之 选 。 


术语 释义 
首先 我 们 先 简单 讨论 下 创建 函数 相关 的 术语 ， 因 为 精确 无 歧义 的 术语 约定 和 我 们 所 讨论 的 各 
种 模式 一 样 重 要 。 
看 下 这 个 代码 片段 : 
// named function expression 


var add = function add(a, b) { 
return a + b; 
}; 


这 段 代 码 描述 了 一 个 函数 ， 这 种 描述 称 为 “ 带 有 命名 的 函数 表达 式 ”。 


如 果 函 数 表达 式 将 名 字 省 略 掉 (比如 下 面 的 示例 代码 ) ， 这 时 它 是 “无 名 字 的 函数 表达 式 "， 通 
常 我 们 称 之 为 “匿名 函数 "， 比 如 : 


// function expression, a.k.a. anonymous function 
var add = function (a, b) { 

return a + b; 
3; 


因此 “函数 表达 式 " 是 一 个 更 广义 的 概念 ，“ 带 有 命名 的 函数 表达 式 " 是 函数 表达 式 的 一 种 特殊 形 
式 ， 仅 仅 当 需要 给 函数 定义 一 个 可 选 的 名 字 时 使 用 。 


当 省 略 第 二 个 add， 它 就 成 了 无 名 字 的 函数 表达 式 ， 这 不 会 对 函数 定义 和 调用 语法 造成 任何 影 
响 。 带 名 字 和 不 带 名 字 唯 一 的 区 别 是 函数 对 象 的 name 属 性 是 否 是 一 个 空 字符 串 。name 属 性 

属于 语言 的 扩展 (未 在 ECMA 标 准 中 定义 ) ， 但 很 多 环境 都 实现 了 。 如 果 不 省 略 第 二 个 add， 

那么 属性 add.name 则 是 "add"，name 属 性 在 用 Firebug 的 调试 过 程 中 非常 有 用 ， 还 能 让 函数 递 
归 调 用 自身 ， 其 他 情况 可 以 省 略 它 。 


最 后 来 看 一 下 “部 数 声明 ”， 骂 数 声明 的 语法 和 其 他 语言 中 的 语法 非常 类 似 : 


function foo() { 
// function body goes here 
} 


从 语法 角度 讲 ， 带 有 命名 的 函数 表达 式 和 函数 声明 非常 像 ， 特 别 是 当 不 需要 将 函数 表达 式 赋 
值 给 一 个 变量 的 时 候 (在 本 章 后 面 所 讲 到 的 回调 模式 中 有 类 似 的 例子 ) 。 多 数 情况 下 ， 函 数 
声明 和 带 命名 的 函数 表达 式 在 外 观 上 没有 多 少 不 同 ， 只 是 它们 在 函数 执行 时 对 上 下 文 的 影响 
有 所 区 别 ， 下 一 小 节 会 讲 到 。 


两 种 语法 的 一 个 区 别 是 末尾 的 分 号 。 函 数 声明 末尾 不 需要 分 号 ， 而 函数 表达 式 末尾 是 需要 分 
号 的 。 推 荐 你 始终 不 要 丢掉 函数 表达 式 末 尾 的 分 号 ， 即 便 JavaScript 可 以 进行 分 号 补 全 ， 也 不 
要 冒险 这 样 做 。 


男 外 我 们 经 常 看 到 “函数 直接 量 "”。 它 用 来 表示 函数 表达 式 或 带 命 名 的 函数 表达 式 。 由 于 这 
个 术语 是 有 歧义 的 ， 所 以 最 好 不 要 用 它 。 


声明 vs RAN: 命名 与 提前 


么 ， 到 底 应 该 用 哪个 呢 ? 函数 声明 还 是 函数 表达 式 ? 在 不 能 使 用 函数 声 明 语 法 的 场景 下 ， 
只 能 使 用 函数 表达 式 了 。 下 面 这 个 例子 中 ， 我 们 给 函数 传 入 了 另 一 个 函数 对 象 作为 参数 ， 以 
及 给 对 象 定义 方法 : 


// this is a function expression, 
// pased as an argument to the function ‘callMe. 
callMe(function () { 

// I am an unnamed function expression 

// also known as an anonymous function 


3); 


// this is a named function expression 
callMe(function me() { 
// I am a named function expression 
// and my name is "me" 


J); 
// another function expression 
var myobject = { 
say: function () { 
// I am a function expression 
} 


}; 


函数 声明 只 能 出 现在 “程序 代码 "中 ， 也 就 是 说 在 别 的 函数 体内 或 在 全 局 。 这 个 定义 不 能 赋值 给 
变量 或 属性 ， 同 祥 不 能 作为 函数 调用 的 参数 。 下 面 这 个 例子 是 函数 声明 的 合法 用 法 ， 这 里 所 
有 的 函数 foo()，bar() 和 local() 都 使 用 函数 声明 来 定义 : 


// global scope 
function foo() {} 


function local() { 
// local scope 
function bar() {} 
return bar; 


函数 的 name 属 性 


函数 定义 模式 的 另 一 个 考虑 是 只 读 属 性 name 的 可 用 性 。 尽 管 标 准 规范 中 并 未 规定 ， 但 很 
多 运行 环境 都 实现 了 name 属 性 ， 在 子 数 声明 和 带 有 名 字 的 函数 表达 式 中 是 有 name 的 属性 定 
ee 式 中 ， 则 不 一 定 有 定义 ， 这 个 是 和 实现 相关 的 ， 在 IE 中 是 无 定义 的 ， 
在 Firefox 和 Safari 中 是 有 定义 的 ， 但 是 值 为 空 字 符 串 。 


function foo() {} // declaration 
var bar = function () {}; // expression 
var baz = function baz() {}; // named expression 


foo.name; // "foo" 
bar.name; // "" 
baz.name; // "baz" 


在 Firebug 或 其 他 工具 中 调试 程序 时 name 属 性 非常 有 用 ， 它 可 以 用 来 显示 当前 正在 执行 的 有 函 
数 。 同 样 可 以 通过 name 属 ， ging 函数 自身 。 如 果 你 对 这 些 场景 不 感 兴趣 ， 那 么 请 尽 
可 能 的 使 用 匿名 函数 表达 式 ， 这 样 会 更 简单 、 且 宛 余 代码 更 少 。 


和 函数 声明 相 比 而 言 ， 函 数 表 达 式 的 语法 更 能 说 明 函 数 是 一 种 对 象 ， 而 不 是 某 种 特别 的 语言 
写法 。 


我 们 可 以 将 一 个 带 名 字 的 函数 表达 式 赋 值 给 变量 ， 变 量 名 和 兄 数 名 不 同 ， 这 在 技术 上 是 
AA o 比如 : var foo = function bantod ° 然而 ， 这 种 用 法 的 行为 在 浏览 器 器 中 的 兼 
容 性 不 佳 (特别 是 IE 中 ) ， 因 此 并 不 推荐 大 家 使 用 这 种 模式 。 





函数 提前 
通过 前 面 的 讲解 ， 你 可 能 以 为 函数 声明 和 带 名 字 的 函数 表达 式 是 完全 等 价 的 。 事 实 上 不 是 这 
样 ， 主 要 区 别 在 于 “声明 提前 "的 行为 。 

术语 “提前 "并 未 在 ECMAScript 中 定义 ， 但 是 并 没有 其 他 更 好 的 方法 来 描述 这 种 行为 了 。 


我 们 知道 ， 不 管 在 函数 内 何 处 声明 变量 ， 变 量 Sleds 动 提前 至 函数 体 的 顶部 。 对 于 函数 来 说 
Ca ， ee ， 变量 。 需 要 注意 的 是 ， 函 数 声明 定义 的 函数 不 
仅 能 让 声明 提前 ， 还 能 让 定义 提前 ， 看 一 下 这 段 示 例 代 码 : 


// antipattern 
// for illustration only 


// global functions 
function foo() { 
alert('global foo'); 


function bar() { 
alert('global bar'); 
} 


function hoistMe() { 


console.log(typeof foo); // "function" 
console.log(typeof bar); // "undefined" 


foo(); // "local foo" 
bar(); // TypeError: bar is not a function 


// function declaration: 
// variable 'foo' and its implementation both get hoisted 


function foo() { 
alert('local foo'); 
} 


// function expression: 

// only variable 'bar' gets hoisted 

// not the implementation 

var bar = function () { 
alert('local bar'); 

J; 


} 
hoistMe(); 


在 这 段 代 码 中 ， 和 普通 的 变量 一 样 ，hoistMe() 函 数 中 的 foo 和 bar 被 "搬运 "到 了 顶部 ， 禾 盖 了 全 
局 的 foo 和 bar。 不 同 之 处 在 于 ， 局 部 的 foo() 定 义 提 前 至 顶部 并 能 正常 工作 ， 尽 管 定 义 它 的 位 置 
并 不 靠 前 。bar() 的 定义 并 未 提前 ， 只 是 声明 提前 了 。 因 此 当 程 序 执行 到 bar() 定 义 的 位 置 之 
前 ， 它 的 值 都 是 undefined， 并 不 是 函数 (防止 当前 上 下 文 查找 到 作用 域 链 上 的 全 局 的 bar()， 
也 就 " 禾 盖 "了 全 局 的 bar()) 。 


到 目前 为 止 我 们 介绍 了 必要 的 背景 知识 和 函数 定义 相关 的 术语 ， 下 面 开始 介绍 一 些 JavaScript 
所 提供 的 函数 相关 的 好 的 模式 ， 我 们 从 回调 模式 开始 。 同 样 ， 再 次 强调 JavaScript 函 数 的 两 个 
特殊 特性 ， 掌 握 这 两 点 至 关 重 要 : 


e 函数 是 对 象 
。 函数 提供 局 部 变量 作用 域 


回调 模式 


函数 是 对 象 ， 也 就 意味 着 函数 可 以 当 作 参数 传 入 另外 一 个 函数 中 。 当 你 给 函数 writeCode() 传 
入 一 个 函数 参数 introduceBugs()， 在 某 个 时 刻 writeCode() 执 行 了 (或 调 用 了 ) 
introduceBugs()。 在 这 种 情况 下 ， 我 们 说 introduceBugs() 是 一 个 “回调 函数 "， 简 称 “ 回 调 ”: 


function writeCode(callback) { 
// do something... 
callback(); 


HL sen 

} 

function introduceBugs() { 
// ... make bugs 

} 


writeCode(introduceBugs); 


as, 


注意 introduceBugs() 是 如 何 作为 参数 传 入 WriteCode() 的 ， 当 作 参 数 的 函数 不 带 括号 。 括 号 的 
思 是 执行 函数 ， 而 这 里 我 们 希望 传 入 一 个 引用 ， 让 WriteCode() 在 合适 的 时 机 执行 它 (调用 
Pg 


意 
we 
wre 
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一 个 回调 的 例子 


我 们 从 一 个 例子 开始 ， 首 先 介 绍 无 回调 的 情况 ， 然 后 pam md es 
用 来 完成 茶 种 复杂 的 逻辑 并 返回 一 大 段 数据 。 假 设 我 们 用 findNodes() 来 命 通用 函数 ， 
这 个 函数 用 来 对 DOM 树 进行 遍历 ， 并 返回 我 所 感 兴趣 的 页 面 节点 : 


var findNodes = function () { 

var i = 100000, // big, heavy loop 
nodes = [], // stores the result 
found; // the next node found 

while (i) { 
i -= 1; 
// complex logic here... 
nodes.push( found) ; 


} 


return nodes; 


}; 


保持 这 个 函数 的 功能 的 通用 性 并 一 贯 返回 DOM 节 点 组 成 的 数组 ， 并 不 会 发 生 对 节点 的 实际 操 
作 ， 这 是 一 个 不 错 的 注意 。 可 以 将 操作 节点 的 逻辑 放 入 另外 一 个 画 数 中 ， 比 如 放 入 一 个 hide() 
函数 中 ， 这 个 函数 用 来 隐藏 页 面 中 的 节点 元 素 : 


var hide = function (nodes) { 
var i = 0, max = nodes.length; 
for (; i < max; i += 1) f{ 
nodes[i].style.display = "none"; 
} 


}; 


// executing the functions 
hide(findNodes()); 


个 实现 的 效率 并 不 高 ， 因 为 它 将 findNodes() 所 返回 的 节点 数组 重新 遍历 了 一 遍 。 最 好 在 
is 选择 元 素 的 时 候 就 直接 应 用 hide() 操 作 ， 这 样 就 能 避免 第 ay 遍历 ， 
效率 。 但 如 果 将 hide() 的 逮 辑 写 死 在 findNodes() 的 函数 体内 ，findNodes() 就 变 得 不 再 通用 


(译注 : 如 果 我 将 hide() 的 逻辑 替换 成 其 他 逻辑 怎么 办 呢 ? ) ， 因 为 修改 逻辑 和 遍历 逻辑 耦合 
在 一 起 了 。 如 果 使 用 回调 模式 ， 则 可 以 将 隐藏 节点 的 逻辑 写 入 回调 函数 ， 将 其 传 入 
findNodes() 中 适时 执行 : 


// refactored findNodes() to accept a callback 
var findNodes = function (callback) { 
var i = 100000, 
nodes = [], 
found; 


// check if callback is callable 
if (typeof callback !== "function") { 
callback = false; 


} 
while (i) { 
at ale 
// complex logic here... 


// now callback: 

if (callback) { 
callback( found); 

} 


nodes.push(found); 


return nodes; 


ten 


这 里 的 实现 比较 直接 ，findNodes() 多 作 了 一 个 额外 工作 ， 就 是 检查 回调 函数 是 否 存在 ， 如 果 
存在 的 话 就 执行 它 。 回 调 函 数 是 可 选 的 ， 因 此 修改 后 的 findNodes() 也 是 和 之 前 一 样 使 用 ， 有 是 
可 以 兼容 日 代码 和 日 API 的 。 


这 时 hide() 的 实现 就 非常 简单 了 ， 因 为 它 不 用 对 元 素 列表 做 任何 遍历 了 : 


// a callback function 
var hide = function (node) { 
node.style.display = "none"; 


}; 


// find the nodes and hide them as you go 
findNodes(hide); 


Ew FR’ DA BATA SAC LY o LT AESA E BK > T AA AAR 
emain ak > Hike PRR > AAT AY A) AF Ag A BefindNodes()*K ZA E T A HAAR : 


// passing an anonymous callback 
findNodes(function (node) { 

node.style.display = "block"; 
3); 


回调 和 作用 域 


在 上 一 个 例子 中 ， 执 行 回调 函数 的 写法 是 : 


callback(parameters); 


尽管 这 种 写法 可 以 适用 大 多 数 的 情况 ， 而 且 足 够 简单 ， 但 还 有 一 些 场景 ， 回 调 函 数 不 是 匿名 
函数 或 者 全 局 函数 ， 而 是 对 象 的 方法 。 如 果 回 调 函 数 中 使 用 this 指 向 它 所 属 的 对 象 ， 则 回调 这 
辑 往 往 并 不 像 我 们 希望 的 那样 执行 。 


假设 回调 函数 是 paint()， 它 是 myapp 的 一 个 方法 : 


var myapp = {}; 

myapp.color = "green"; 

myapp.paint = function (node) { 
node.style.color = this.color; 


J; 
$ HfindNodes() A Ke TF : 
var findNodes = function (callback) { 
Lae 
if (typeof callback === "function") { 
callback( found) ; 
} 
UN ane 


3; 
当 你 调用 fndNodes(myapp.paint)， 和 运行 结果 和 我 们 期 望 的 不 一 致 ， 因 为 this.color 未 定义 。 


为 findNodes() 是 全 局 函数 ，this 指 向 的 是 全 局 对 象 。 如 果 findNodes() 是 dom 对 象 的 方法 (类似 
dom.findNodes()) ， 那 么 回调 函数 内 的 this 则 指向 dom， 而 不 是 myapp。 


解决 办 法 是 ， 除 了 传 入 回调 函数 ， 还 需 将 回调 函数 所 属 的 对 象 当 作 参 数 传 进去 : 
findNodes(myapp.paint, myapp); 


同样 需要 修改 fndNodes() 的 逻辑 ， 增 加 对 传 入 的 对 象 的 绑 定 : 


var findNodes = function (callback, callback_obj) { 
AR 


if (typeof callback === "function") { 
callback.call(callback_obj, found); 

} 

HE aa 


}; 


在 后 续 的 章节 会 对 call() 和 apply() 有 更 详细 的 讲述 。 
其 实 还 有 一 种 替代 写法 ， 就 是 将 函数 当 作 字 符 串 传 入 findNodes()， 这 样 就 不 必 再 写 一 次 对 象 
J > REW: 


findNodes(myapp.paint, myapp); 


可 以 写成 : 
findNodes("paint", myapp); 


在 findNodes() 中 的 逻辑 则 需要 修改 为 : 


var findNodes = function (callback, callback_obj) { 


if (typeof callback === "String") { 
callback = callback_obj[callback]; 

} 

Wh ware 

if (typeof callback === "function") { 
callback.call(callback_obj, found); 

} 

We owe 


步 事件 监听 


JavaScript 中 的 回调 模式 已 经 是 我 们 的 家 常 便 饭 了 了， 比如， 如 果 你 给 网 页 中 的 元 素 绑 定 事件 ， 
则 需要 提供 回调 函数 的 引用 ， 以 便 事件 发 生 时 能 调用 到 它 。 这 里 有 一 个 简单 的 例子 ， 我 们 将 
console.log() 作 为 回调 函数 绑 定 了 document 的 点 击 事件 : 


document .addEventListener("click", console.log, false); 


客户 端 浏览 器 中 的 大 多 数 编程 都 是 事件 驱动 的 ， 当 网 页 下 载 完成 ， 则 触发 load 事 件 ， 当 用 户 和 
页 面 产生 交互 时 也 会 触发 多 种 事件 ， 比 如 click、keypress、mouseover、mousemove 等 等 。 
正 是 由 于 回调 模式 的 灵活 性 ，JavaScript 天 生 适 于 事件 驱动 编程 。 回 调 模式 能 够 让 程序 " 异 
步 " 执 行 ， 换 句 话 说， 就 是 让 程序 不 按 顺序 执行 。 


“不 要 打 电 话 给 我 ， 我 会 打 给 你 *， 这 是 好 莱 坞 很 有 名 的 一 句 话 ， 很 多 电影 都 有 这 和 句 人 台词 。 电 影 
ie 不 可 能 同时 应 答 很 多 个 电话 呼叫 。 在 JavaScript 的 异步 事件 模型 中 也 是 同样 的 道理 。 

影 中 是 留 下 电话 号 码 ，JavaScript 中 是 提供 一 个 回调 函数 ， 当 时 机 成 熟 时 就 触发 回调 。 有 时 
ee 回调 ， 有 些 回调 压根 是 没 用 的 ， 但 由 于 这 个 事件 可 能 永远 不 会 发 生 ， 因 此 这 
些 回调 的 逻辑 也 不 会 执行 。 比 如 ， 假 设 你 从 此 不 再 用 “鼠标 点 击 "， 那 么 你 之 前 绑 定 的 鼠标 点 击 
的 回调 部 数 则 永远 也 不 会 执行 。 


超时 


另外 一 个 最 常用 的 回调 模式 是 在 调用 超时 函数 时 ， 超 时 函数 是 浏览 器 window 对 象 的 方法 ， 共 
有 两 个 : setTimeout() 和 setlnterval()。 这 两 个 方法 的 参数 都 是 回调 函数 。 


var thePlotThickens = function () { 
console.log('500ms later...'); 


}; 
setTimeout(thePlotThickens, 500); 


再 次 需要 注意 ， a 变量 传 入 SetTimeout 的 ， 它 不 带 括号 ， 如 果 带 括 
号 的 话 则 立即 执行 了 ， 这 里 只 是 用 到 这 个 函数 的 引用 ， 以 便 在 setTimeout 的 逻辑 中 调用 到 它 
oa 是 一 种 反 模 式 ， 和 eval() 一 样 不 推荐 使 用 。 


库 中 的 回调 


回调 模式 非常 简单 ， 但 又 很 强大 。 可 以 随手 掉 来 灵活 运用 ， 因 此 这 种 模式 在 库 的 设计 中 也 非 
常 得 宠 。 库 的 代码 要 尽 可 能 的 保持 通用 和 重用 ， 而 回调 模式 则 可 帮助 库 的 作者 完成 这 个 目 
标 。 你 不 必 有 预料 和 实现 你 所 想到 的 所 有 情形 ， 因 为 这 会 让 库 变 的 膨胀 而 膝 肿 ， 而 且 大 多 数 用 
户 并 不 需要 这 些 多 余 的 特性 支持 。 相 反 ， 你 将 精力 放 在 核心 功能 的 实现 上 ， 提 供 回调 的 入 口 
作为 “钩子 ”， 可 以 让 库 的 方法 变 得 可 扩展 、 可 定制 。 


E ph Ax 


pees 因此 当然 可 以 作为 返回 值 。 也 就 是 说 ， 函 数 不 一 定 非 要 返回 一 坨 数据， 函数 可 
返回 另外 一 个 定制 好 的 函数 ， 或 者 可 以 根据 输入 的 不 同 按 需 创造 另外 一 个 函数 。 


这 里 有 一 个 简单 的 例子 : 一 个 函数 完成 了 某 种 功能 ， 可 能 是 一 次 性 初始 化 ， 然 后 都 基于 这 个 
返回 值 进行 操作 ， 这 个 返回 值 恰 巧 是 另 一 个 函数 : 


var setup = function () { 
alert(1); 
return function () { 
alert(2); 
3; 
// using the setup function 
var my = setup(); // alerts 1 
my(); // alerts 2 


因为 setup() 把 返回 的 函数 作 了 包装 ， 它 创建 了 一 个 闭 包 ， 我 们 可 以 用 这 个 闭 包 来 存储 一 些 私 
有 数据 ， 这 些 私 有 数据 可 以 通过 返回 的 函数 进行 操作 ， 但 在 函数 外 部 不 能 直接 读 取 到 这 些 私 
有 数据 。 比 如 这 个 例子 中 提供 了 一 个 计数 器 ， 每 次 调用 这 个 函数 计数 器 都 会 加 一 : 


var setup = function () { 
var count = 0; 
return function () { 
return (count += 1); 
}; 
}; 


// usage 

var next = setup(); 
next(); // returns 1 
next(); // 2 

next(); // 3 


自 定义 函数 


我 们 动态 定义 函数 ， 并 将 函数 赋值 给 变量 。 如 果 将 你 定义 的 函数 赋值 给 已 经 存在 的 函数 变量 
的 话 ， 则 新 函数 会 覆盖 昌 郊 数 。 这 样 做 的 结果 是 ， 旧 郊 数 的 引用 就 丢弃 挤 了 ， 变 量 中 所 存储 
的 引用 值 蔡 换 成 了 新 的 。 这 样 看 起 来 这 个 变量 指 代 的 函数 逻辑 就 发 生 了 变化 ， 或 者 说 函数 进 
行 了 “重新 定义 "或 “ 重 写 "。 说 起 来 有 些 所 口 ， 实 际 上 并 不 复杂 ， 来 看 一 个 例子 


var scareMe = function () { 
alert("Boo!"); 
scareMe = function () { 
alert("Double boo!"); 


ten 
}; 


// using the self-defining function 
scareMe(); // Boo! 
scareMe(); // Double boo! 


当 函 数 中 包含 一 些 初始 化 操作 ， 并 希望 这 些 初始 化 只 执行 一 次 ， 那 么 这 种 模式 是 非常 适合 这 
个 场景 的 。 因 为 能 避免 的 重复 执行 则 尽量 避免 ， 函 数 的 一 部 分 可 能 再 也 不 会 执行 到 。 在 这 个 
场景 中 ， 函 数 执 行 一 次 后 就 被 重 写 为 另外 一 个 函数 了 。 


使 用 这 种 模式 可 以 帮助 提高 应 用 的 执行 效率 ， 因 为 重新 定义 的 函数 执行 更 少 的 代码 。 


这 种 模式 的 另外 一 个 名 字 是 “函数 的 懒惰 定义 ”， 因 为 直到 元 数 执行 一 次 后 才 重 新 定义 ， 可 
以 说 它 是 “ 某 个 时 间 点 之 后 才 存 在 *， 简称" 懒惰 定义 ”。 


这 种 模式 有 一 种 明显 的 缺陷， 就 是 之 前 给 原 函 数 添 加 的 功能 在 重 定义 之 后 都 丢失 了 。 如 果 将 
这 个 函数 定义 为 不 同 的 名 字 ， 函 数 赋值 给 了 很 多 不 同 的 变量 ， 或 作为 对 象 的 方法 使 用 ， 那 么 
新 定义 的 函数 有 可 能 不 会 执行 ， 原 始 的 函数 会 照旧 执行 (译注 : 由 于 函数 的 赋值 是 引用 的 赋 
值 ， 兄 数 赋值 给 多 个 变量 只 是 将 引用 赋值 给 了 多 个 变量 ， 当 茶 一 个 变量 定义 了 新 的 函数 ， 也 
只 是 变量 的 引用 值 发 生变 化 ， 原 函数 本 身 依旧 存在 ， 当 程序 中 存在 某 个 变量 的 引用 还 是 四 函 
数 的 话 ， 旧 函数 还 是 会 依旧 执行 ) 。 


让 我 们 来 看 一 个 例子 ，scareMe() 函 这 里 作为 一 等 对 象 来 使 用 : 


1. 给 他 增加 了 一 个 属性 
2. 函数 对 象 赋值 给 一 个 新 变量 


3. 函数 依 日 可 以 作为 方法 来 调用 
看 一 下 这 段 代码 : 


// 1. adding a new property 
scareMe.property = "properly"; 


// 2. assigning to a different name 
var prank = scareMe; 


// 3. using as a method 
var spooky = { 
boo: scareMe 


}; 


// calling with a new name 

prank(); // "Boo!" 

prank(); // "Boo!" 
console.log(prank.property); // "properly" 


// calling as a method 
spooky.boo(); // "Boo!" 
spooky.boo(); // "Boo!" 
console. log(spooky.boo.property) ; // "properly" 


// using the self-defined function 
scareMe(); // Double boo! 

scareMe(); // Double boo! 
console.log(scareMe.property); // undefined 


从 结果 来 看 ， 当 自 定 义 函 数 被 赋值 给 一 个 新 的 变量 的 时 候 ， 这 段 使 用 自 定 义 函 数 的 代码 的 执 
行 结果 与 我 们 期 望 的 结果 可 能 并 不 一 样 。 每 当 prank() 运 行 的 时 候 ， 它 都 弹出 “Boom。 同 时 它 也 
重 写 了 scareMe() 函 数 ， 但 是 prank() 自 己 仍 然 能 够 使 用 之 前 的 定义 ， 包 括 属 性 property。 在 这 
个 函数 被 作为 spooky 对 象 的 boo() 方 法 调用 的 时 候 ， 结 果 也 一 样 。 所 有 的 这 些 调用 ， 在 第 一 次 
的 时 候 就 已 经 修改 了 全 局 的 scareMe() 的 指向 ， 所 以 当 它 最 终 被 调用 的 时 候 ， 它 的 函数 体 已 经 
被 修改 为 弹出 "Double boo”。 它 也 就 不 能 获取 到 新 添加 的 属性 “property”。 


=> 4 二 ye, 米 
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立即 执行 的 函数 是 一 种 语法 模式 ， 它 会 使 函数 在 定义 后 立即 执行 。 看 这 个 例子 : 


(function () { 
alert('watch out!'); 


}()); 


这 种 模式 本 质 上 只 是 一 个 在 创建 后 就 被 执行 的 函数 表达 式 (具名 或 者 匿名 ) 。“ 立 即 执行 的 函 
数 " 这 种 说 法 并 没有 在 ECMAScript 标 准 中 被 定义 ， 但 它 作为 一 个 名 词 ， 有 助 于 我 们 的 描述 和 讨 
论 。 
这 种 模式 由 以 下 几 个 部 分 组 成 : 

。 使 用 函数 表达 式 定义 一 个 函数 。 (不 能 使 用 函数 声明 。) 

e 在 最 后 加 入 一 对 括号 ， 这 会 使 函数 立即 被 执行 。 


e@ 把 整个 函数 包 衰 到 一 对 括号 中 (只 在 没有 将 函数 赋值 给 变量 时 需要 ) © 
下 面 这 种 语法 也 很 常见 (注意 右 括号 的 位 置 ) ， 但 是 JSLint 倾 向 于 第 一 种 : 


(function () { 
alert('watch out!'); 


DO; 


这 种 模式 很 有 用 ， 它 为 我 们 提供 一 个 作用 域 的 沙 箱 ， 可 以 在 执行 一 些 初始 化 代码 的 时 候 使 
用 。 设 想 这 样 的 场景 ; 当 页 面 加 载 的 时 候 ， 你 需要 运行 一 些 代码 ， 比 如 绑 定 事件 、 创 建 对 象 
等 等 。 所 有 的 这 些 代码 都 只 需要 运行 一 次 ， 所 以 没有 必要 创建 一 个 带 有 名 字 的 函数 。 但 是 这 
些 代码 需要 一 些 临 时 变量 ， 而 这 些 变量 在 初始 化 完 之 后 又 不 会 再 次 用 到 。 显 然 ， 把 这 些 变量 
作为 全 局 变量 声明 是 不 合适 的 。 正 因为 如 此 ， 我 们 才 需 要 立即 执行 的 函数 。 它 可 以 把 你 所 有 
的 代码 包 衷 到 一 个 作用 域 里 面 ， 而 不 会 暴露 任何 变量 到 全 局 作用 域 中 : 


(function () { 
var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 
today = new Date(), 
msg = 'Today is ' + days[today.getDay()] + ', ' + today.getDate(); 
alert(msg); 


3()); 7/7 "Today is Fri, 13" 
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而 这 些 变量 仅仅 是 由 因为 初始 化 而 遗留 下 来 的 垃圾 ， 没 有 任何 用 处 。 


=> 二 2 米 米 

立即 执行 的 函数 的 参数 

立即 执行 的 函数 也 可 以 接受 参数 ， 看 这 个 例子 : 
// prints: 
// I met Joe Black on Fri Aug 13 2010 23:26:59 GMT-0800 (PST) 
(function (who, when) { 


console.log("I met " + who + " on " + when); 


}("Joe Black", new Date())); 


通常 的 做 法 ， 会 把 全 局 对 象 当 作 一 个 参数 传 给 立即 执行 的 函数 ， 以 保证 在 函数 内 部 也 可 以 访 
问 到 全 局 对 和 象 ， 而 不 是 使 用 window 对 象 ， 这 样 可 以 使 得 代码 在 非 浏览 器 环境 中 使 用 时 更 具 可 
移植 性 。 


值得 注意 的 是 ， 一 般 情 况 下 尽量 不 要 给 立即 执行 的 函数 传 入 太 多 的 参数 ， 否 则 会 有 一 件 麻烦 
的 事情 ， 就 是 你 在 阅读 代码 的 时 候 需 要 频繁 地 上 下 滚动 代码 。 


立即 执行 的 部 数 的 返回 值 


和 其 它 的 函数 一 样 ， 立 即 执行 的 函数 也 可 以 返回 值 ， 并 且 这 些 返回 和 值 也 可 以 被 赋值 给 变量 : 


var result = (function () { 
return 2 + 2; 


}()); 


如 果 省 略 括号 的 话 也 可 以 达到 同样 的 目的 ， 因 为 如 果 需 要 将 返回 值 赋 给 变量 ， 那 么 第 一 对 括 
号 就 不 是 必需 的 。 省 略 括号 的 代码 是 这 样子 : 


var result = function () { 
return 2 + 2; 


$0); 


这 种 写法 更 简洁 ， 但 是 同时 也 容易 造成 误解 。 如 果 有 人 在 阅读 代码 的 时 候 忽 略 了 最 后 的 一 对 
括号 ， 那 么 他 会 以 为 result 指 向 了 一 个 函数 。 而 事实 上 result 是 指向 这 个 函数 运行 后 的 返回 值 ， 
在 这 个 例子 中 是 4。 


还 有 一 种 写法 也 可 以 得 到 同样 的 结果 : 


var result = (function () { 
return 2 + 2; 


HO; 


前 面 的 例子 中 ， 立 即 执行 的 函数 返回 的 是 一 个 基本 类 型 的 数值 。 但 事实 上 ， 除 了 基本 类 型 以 
外 ， 一 个 立即 执行 的 函数 可 以 返回 任意 类 型 的 值 ， 甚 至 返回 一 个 函数 都 可 以 。 你 可 以 利用 立 
即 执行 的 汶 数 的 作用 域 来 存储 一 些 私有 的 数据 ， 这 些 数据 只 能 在 返回 的 内 层 函 数 中 被 访问 。 


在 下 面 的 例子 中 ， 立 即 执行 的 函数 的 返回 值 是 一 个 函数 ， 这 个 函数 会 简单 地 返回 res 的 值 ， 并 
且 它 被 戏 给 了 变量 getResult。 而 res 是 一 个 预先 计算 好 的 变量 ， 它 被 存储 在 立即 执行 函数 的 闭 
EF: 


var getResult = (function () { 
var res = 2 + 2; 
return function () { 
return res; 


ten 
40); 
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义 一 个 对 象 的 属性 ， 这 个 属性 在 对 象 的 生命 周期 中 都 不 会 改变 ， 但 是 在 定义 之 前 ， 你 需要 做 
一 点 额外 的 工作 来 得 到 正确 的 值 。 这 种 情况 下 你 就 可 以 使 用 立即 执行 的 函数 来 包 讲 那些 额外 
的 工作 ， 然 后 将 它 的 返回 值 作为 对 象 属性 的 值 。 下 面 是 一 个 例子 : 


var o= { 
message: (function () { 


var who = "me", 
what = "call"; 
return what + " " + who; 
#()), 


getMsg: function () { 
return this.message; 
} 


}; 
// usage 


o.getMsg(); // "call me" 
o.message; // "call me" 


在 这 个 例子 中 ，o.message 是 一 个 字符 串 ， 而 不 是 一 个 函数 ， 但 是 它 需要 一 个 函数 在 脚本 载 入 
后 来 得 到 这 个 属性 值 。 


好 处 和 用 法 


立即 执行 的 函数 应 用 很 广泛 。 它 可 以 帮助 我 们 做 一 些 不 想 留 下 全 局 变量 的 工作 。 所 有 定义 的 
变量 都 只 是 立即 执行 的 函数 的 本 地 变量 ， 你 完全 不 用 担心 临时 变量 会 污染 全 局 对 象 。 
立即 执行 的 函数 还 有 一 些 名 字 ， 比 如 * 自 调用 函数 "或 者 " 自 执行 函数 "， 因 为 这 些 函 数 会 在 
被 定义 后 立即 执行 自己 。 
这 种 模式 也 经 常 被 用 到 书签 代码 中 ’ 因为 书签 代码 会 在 任何 一 个 页 面 运行 9 所 以 需要 非常 并 
刻 地 保持 全 局 命名 空间 干净 。 
这 种 模式 也 可 以 让 你 包 训 一 些 独立 的 特性 到 一 个 封闭 的 模块 中 。 设 想 你 的 页 面 是 静态 的 ， 在 
没有 JavaScript 的 时 候 工作 正常 ， 然 后 ， 本 着 渐进 增强 的 精神 ， 你 给 页 面 加 入 了 一 点 增加 代 
码 。 这 时 候 ， 你 就 可 以 把 你 的 代码 (也 可 以 叫 "模块 "或 者 "特性 ") 放 到 一 个 立即 执行 的 函数 中 
并 且 保 证 页 面 在 有 没有 它 的 时 候 都 可 以 正常 工作 。 然 后 你 就 可 以 加 入 更 多 的 增强 特性 ， 或 者 
对 它们 进行 移 除 、 进 行 独立 测试 或 者 多 许 用 户 禁用 等 等 。 


你 可 以 使 用 下 面 的 模板 定义 一 段 函 数 代码 ， 我 们 叫 它 modulel1 : 


// module1 defined in module1.js 
(function () { 
// all the module 1 code ... 


}()); 


套用 这 个 模板 ， 你 就 可 以 编写 其 它 的 模块 。 然 后 在 发 布 到 线 上 的 时 候 ， 你 就 可 以 决定 在 这 个 
时 间 节点 上 哪些 特性 是 可 以 使 用 的 ， 然 后 使 用 发 布 脚本 将 它们 打包 上 线 。 


立即 初始 化 的 对 象 


还 有 另外 一 种 可 以 避免 污染 全 局 作用 域 的 方法 ， 和 前 面 描述 的 立即 执行 的 函数 相似 ， 叫 做 “ 立 
即 初始 化 的 对 象 " 模 式 。 这 种 模式 使 用 一 个 带 有 init() 方 法 的 对 象 来 实现 ， 这 个 方法 在 对 象 被 创 
建 后 立即 执行 。 初 始 化 的 工作 由 init() 函 数 来 完成 。 


下 面 是 一 个 立即 初始 化 的 对 象 模式 的 例子 : 


({ 


// here you can define setting values 
// a.k.a. configuration constants 
maxwidth: 600, 

maxheight: 400, 


// you can also define utility methods 
gimmeMax: function () { 

return this.maxwidth + "x" + this.maxheight; 
}, 


// initialize 

init: function () { 
console. log(this.gimmeMax()); 
// more init tasks... 


} 
}).init(); 


在 语法 上 ， 当 你 使 用 这 种 模式 的 时 候 就 像 在 使 用 对 象 字面 量 创建 一 个 普通 对 象 一 样 。 除 此 之 
外 ， 还 需要 将 对 象 字面 量 用 括号 括 起 来 ， 这 样 能 让 JavaScript 引 擎 知道 这 是 一 个 对 象 字面 量 ， 
而 不 是 一 个 代码 块 (if 或 者 for 循 环 之 类 ) 。 在 括号 后 面 ， 紧 接着 就 执行 了 init() 方 法 。 


你 也 可 以 将 对 象 字 面 量 和 init() 调 用 一 起 写 到 括号 里 面 。 简 单 地 说 ， 下 面 两 种 语法 都 是 有 效 
ay: 


...}).init(); 


( 
({...}.init()); 


AA 


这 种 模式 的 好 处 和 自动 执行 的 函数 模式 是 一 样 的 : 在 做 一 些 一 次 性 的 初始 化 工作 的 时 候 保护 
全 局 作用 域 不 被 污染 。 从 语法 上 看 ， 这 种 模式 似乎 比 只 包含 一 段 代 码 在 一 个 匿名 函数 中 要 复 
杂 一 些 ， 但 是 如 果 你 的 初始 化 工作 比较 复杂 (这 种 情况 很 常见 ) ， 它 会 给 整个 初始 化 工作 一 
个 比较 清晰 的 结构 。 比 如 ， 一 些 私 有 的 辅助 性 函数 可 以 被 很 轻易 地 看 出 来 ， 因 为 它们 是 这 个 
临时 对 象 的 属性 ， 但 是 如 果 是 在 立即 执行 的 函数 模式 中 ， 它 们 很 可 能 只 是 一 些 散 落 的 函数 。 


这 种 模式 的 一 个 商 端 是 ，JavaScript 压 缩 工具 可 能 不 能 像 压缩 一 段 包 衰 在 函数 中 的 代码 一 样 有 
效 地 压缩 这 种 模式 的 代码 。 这 些 私有 的 属性 和 方法 不 被 会 重 命名 为 一 些 更 短 的 名 字 ， 因 为 从 
压缩 工具 的 角度 来 看 ， 保 证 压缩 的 可 靠 性 更 重要 。 在 写作 本 书 的 时 候 ，Google 出 品 的 Closure 
Compiler 的 "advanced" 模 式 是 唯一 会 重 命名 立即 初始 化 的 对 象 的 属性 的 压缩 工具 。 一 个 压缩 
后 的 样 例 是 这 样 : 


({d:600,c:400,a:function(){return this.d+"x"+this.c},b:function(){console.log(this.a())}} 
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后 就 法 再 次 访 问 到 这 


这 种 模式 主要 用 于 一 些 一 次 性 的 工作 ， 并 且 在 init() 方 法 执行 完 
需要 简单 地 在 init() 的 oe 


对 象 。 如 果 和 希望 在 这 些 工作 完成 后 保持 对 对 象 的 引用 ， 只 
return this; 即 可。 


条 件 初 始 化 


条 件 初始 化 (也 叫 ns 是 一 种 优化 模式 。 当 你 知道 茶 种 条 件 在 整个 程序 生命 周期 中 都 
不 会 变化 的 时 候 ， 那 么 对 这 个 条 件 的 探测 只 做 一 次 就 很 有 意义 。 浏 览 器 探测 (或 者 特征 检 
测 ) 是 一 个 典型 的 例子 


举例 说 明 ， 当 你 探测 到 XMLHttpRequest 被 作为 一 个 本 地 对 象 支持 时 ， 就 知道 浏览 器 不 会 在 程 
序 执行 过 程 中 改变 这 一 情况 ， 人 情况 。 当 环境 不 发 生 
变化 的 时 候 ， 你 的 代码 就 没有 必要 在 需要 在 每 次 XHR 对 象 时 探测 一 遍 (并 且 得 到 同样 的 结 

果 ) ° 

另外 一 些 可 以 从 条 件 初始 化 中 获 益 的 场景 
事件 处 理 函 数 。 大 部 分 程序 员 在 他 们 的 客 
的 组 件 ， 像 下 面 的 例子 


是 获得 一 个 DOM 元 素 的 computed styles 或 者 是 绑 定 
户 端 编程 生涯 中 都 编写 过 事件 绑 定 和 取消 绑 定 相关 


// BEFORE 
var utils = { 
addListener: function (el, type, fn) { 
if (typeof window.addEventListener === 'function') { 
el.addEventListener(type, fn, false); 
} else if (typeof document.attachEvent === 'function') { // IE 


el.attachEvent('on' + type, fn); 
} else { // older browsers 
el['on' + type] = fn; 
} 
}, 


removeListener: function (el, type, fn) { 


// pretty much the same... 
} 


}; 


这 段 代码 的 问题 就 是 效率 不 高 。 每 当 你 执行 utils.addListener() 或 者 utils.removeListener() 时 > 
同样 的 检查 都 会 被 重复 执行 。 


如 果 使 用 条 件 初 始 化 ， 那 么 浏览 器 探测 的 工作 只 需要 在 初始 化 代码 的 时 候 执行 一 次 。 在 初始 
化 的 时 候 ， 代 码 探 测 一 次 环境 ， 然 后 重新 定义 这 个 函数 在 剩 下 来 的 程序 生命 周期 中 应 该 怎样 
工作 。 下 面 是 一 个 例子 ， 看 看 如 何 达 到 这 个 目的 : 


// AFTER 


// the interface 

var utils = { 
addListener: null, 
removeListener: null 


}; 
// the implementation 
if (typeof window.addEventListener === 'function') { 
utils.addListener = function (el, type, fn) { 
el.addEventListener(type, fn, false); 
}; 
utils.removeListener = function (el, type, fn) { 
el.removeEventListener(type, fn, false); 
} else if (typeof document.attachEvent === 'function') { // IE 


utils.addListener = function (el, type, fn) { 
el.attachEvent('on' + type, fn); 

J; 

utils.removeListener = function (el, type, fn) { 
el.detachEvent('on' + type, fn); 


} else { // older browsers 
utils.addListener = function (el, type, fn) { 
el['on' + type] = fn; 
}; 
utils.removeListener = function (el, type, fn) { 
el['on' + type] = null; 
}; 


说 到 这 里 ， 要 特别 提醒 一 下 关于 浏览 器 探测 的 事情 。 当 你 使 用 这 个 模式 的 时 候 ， 不 要 对 浏览 

器 特性 过 度假 设 。 举 个 例子 ， 如 果 你 探测 到 浏览 器 不 支持 window.addEventListener， 不 要 假 
设 这 个 浏览 器 是 IE， 也 不 要 认为 它 不 支持 原生 的 XMLHttpRequest， 虽 然 这 个 结论 在 整个 浏览 
器 历史 上 的 菜 个 点 是 正确 的 。 当 然 ， 也 有 一 些 情 况 是 可 以 放心 地 做 一 些 特 性 假设 的 ， 比 

如 .addEventListener 和 .removeEventListerner， 但 是 通常 来 讲 ， 浏 览 器 的 特性 在 发 生变 化 时 

都 是 独立 的 。 最 好 的 策略 就 是 分 别 探测 每 个 特性 ， 然 后 使 用 条 件 初 始 化 ， 使 这 种 探测 只 做 一 


次 。 


函数 届 性 一 Memoization 模 式 


函数 也 是 对 象 ， 所 以 它们 可 以 有 属性 。 事 实 上 ， 函 数 也 确实 本 来 就 有 一 些 属性 。 比 如 ， 对 一 
个 函数 来 说 ， 不 管 是 用 什么 语法 创建 的 ， 它 会 自动 拥有 一 个 length 属 性 来 标识 这 个 函数 期 待 接 
受 的 参数 个 数 ; 


function func(a, b, c) {} 
console.log(func.length); // 3 


任何 时 候 都 可 以 给 函数 添加 自 定 义 属 性 。 添 加 自 定 义 属 性 的 一 个 有 用 场景 是 缓存 函数 的 执行 
结果 (返回 值 ) ， 这 样 下 次 同样 的 函数 被 调用 的 时 候 就 不 需要 再 做 一 次 那些 可 能 很 复杂 的 计 
算 。 缓 存 一 个 函数 的 运行 结果 也 就 是 为 大 家 所 熟知 的 Memoization 。 


在 下 面 的 例子 中 ，myFunc 逻 数 创建 了 一 个 cache 属 性 ， 可 以 通过 myFunc.cache 访 问 到 。 这 个 
cache 属 性 是 一 个 对 象 (hash 表 ) ， 传 给 函数 的 参数 会 作为 对 象 的 key， 函 数 执行 结果 会 作为 
对 象 的 值 。 函 数 的 执行 结果 可 以 是 任何 的 复杂 数据 结构 : 


var myFunc = function (param) { 
if (!myFunc.cache[param]) { 
var result = {}; 
// ... expensive operation ... 
myFunc.cache[param] = result; 


} 
return myFunc.cache[param]; 


}; 


// cache storage 
myFunc.cache = {}; 


上 面 的 代码 假设 函数 只 接受 一 个 参数 param， 并 且 这 个 参数 是 基本 类 型 (比如 字符 串 ) 。 如 果 
你 有 更 多 更 复杂 的 参数 ， 则 通常 需要 对 它们 进行 序列 化 。 比 如 ， 你 需要 将 arguments 对 象 序列 
化 为 JSON 字 符 串 ， 然 后 使 用 JSON 字 符 串 作为 cache 对 象 的 key : 


var myFunc = function () { 


var cachekey = JSON.stringify(Array.prototype.slice.call(arguments)), 
result; 


if (!myFunc.cache[cachekey]) { 
result = {}; 
// ... expensive operation ... 
myFunc.cache[cachekey] = result; 


return myFunc.cache[cachekey ]; 


ten 


// cache storage 
myFunc.cache = {}; 


需要 注意 的 是 ， 在 序列 化 的 过 程 中 ， 对 象 的 标识 "将 会 丢失 。 如 果 你 有 两 个 不 同 的 对 象 ， 却 碰 
巧 有 相同 的 属性 ， 那 么 他 们 会 共享 同样 的 缓存 内 容 。 
前 面 代码 中 的 函数 名 还 可 以 使 用 arguments.callee 来 替代 ， 这 样 就 不 用 将 函数 名 硬 编码 。 不 过 


尽管 现 阶 段 这 个 办 法 可 行 ， 但 是 仍然 需要 注意 ，arguments.callee 在 ECMAScript 5 的 严格 模式 
中 是 不 被 允许 的 : 


var myFunc = function (param) { 


var f = arguments.callee, 
result; 


if (!f.cache[param]) { 
result = {}; 


// ... expensive operation ... 
f.cache[param] = result; 


} 


return f.cache[param]; 


}; 


// cache storage 
myFunc.cache = {}; 


BC a Ht HR 


配置 对 象 模式 是 一 种 提供 更 简洁 的 API 的 方法 ， 尤 其 是 当 你 正在 写 一 个 即将 被 其 它 程序 调用 的 
类 库 之 类 的 代码 的 时 候 。 


软件 在 开发 和 维护 过 程 中 需要 不 断 改变 是 一 个 不 争 的 事实 。 这 样 的 事情 总 是 以 一 些 有 限 的 需 
求 开始 ， 但 是 随 着 开发 的 进行 ， 越 来 越 多 的 功能 会 不 断 被 加 进来 。 


设想 一 下 你 正在 写 一 个 名 为 addPerson() 的 函数 ， 它 接受 一 个 姓 和 一 个 名 ， 然 后 在 列表 中 加 入 
一 从 大 


function addPerson(first, last) {...} 


然后 你 意识 到 ， 生 日 也 必须 要 存储 ， 此 外 ， 性 别 和 地 址 也 作为 可 选项 存储 。 所 以 你 修改 了 函 
数 ， 添 加 了 一 些 新 的 参数 (还 得 非常 小 心地 将 可 选 参数 放 到 最 后 ) 


function addPerson(first, last, dob, gender, address) {...} 


这 个 时 候 ， 函 数 已 经 显得 有 点 长 了 。 然 后 ， 你 又 被 告知 需要 添加 一 个 用 户 名 ， 并 且 不 是 可 选 
的 。 现 在 这 个 函数 的 调用 者 需要 将 所 有 的 可 选 参 数 传 进来 ， 并 且 得 非常 小 心地 保证 不 弄 混 参 
数 的 顺序 : 


addPerson("Bruce", "Wayne", new Date(), null, null, "batman"); 


传 一 大 事 的 参数 丨 的 很 不 方便 。 一 个 更 好 的 办 法 就 是 将 它们 蔡 换 成 一 个 参数 ， 并 且 把 这 个 参 
A RTZ ; 我 们 叫 它 conf， 是 “configuration”( 配 置 ) 的 缩写 : 


addPerson(conf); 


然后 这 个 函数 的 使 用 者 就 可 以 这 样 : 


var conf = { 
username: "batman", 
first: "Bruce", 
last: "Wayne" 

}; 


addPerson(conf); 


配置 对 象 模 式 的 好 处 是 : 


不 需要 记 住 参 数 的 顺序 

可 以 很 安全 地 跳 过 可 选 参 数 
拥有 更 好 的 可 读 性 和 可 维护 性 
© 更 容易 添加 和 移 除 参 数 


配置 对 象 模式 的 坏处 是 : 


© 需要 记 住 参数 的 名 字 
© 参数 名 字 不 能 被 压缩 


举 些 实例 ， 这 个 模式 对 创建 DOM 元 素 的 函数 或 者 是 给 元 素 设 定 CSS 样 式 的 函数 会 非常 实用 ， 
因为 元 素 和 CSS 样 式 可 能 会 有 很 多 但 是 大 部 分 可 选 的 属性 。 


柯 里 化 (Curry) 


在 本 章 剩 下 的 部 分 ， 我 们 将 讨论 一 下 关于 柯 里 化 和 部 分 应 用 的 话题 。 但 是 在 我 们 开始 这 个 话 
题 之 前 ， 先 看 一 下 到 底 什么 是 函数 应 用 。 


子 数 应 用 


在 一 些 纯粹 的 函数 式 编程 语言 中 ， 对 函数 的 描述 不 是 被 调用 (called 或 者 invoked) ， 而 是 被 
应 用 (applied) 。 在 JavaScript 中 也 有 同样 的 东西 一 一 我 们 可 以 使 用 
Function.prototype.apply() 来 应 用 一 个 函数 ， 因 为 在 JavaScript 中 ， 函 数 实 际 上 是 对 象 ， 并 且 
他 们 拥有 方法 。 


下 面 是 一 个 函数 应 用 的 例子 : 


// define a function 
var sayHi = function (who) { 
return "Hello" + (who ? ", "+ who: "") + "I"; 


}; 


// invoke a function 
sayHi(); // "Hello" 
sayHi('world'); // "Hello, world!" 


// apply a function 
sayHi.apply(null, ["hello"]); // "Hello, hello!" 


从 上 面 的 例子 中 可 以 看 出 来 ， 调 用 一 个 函数 和 应 用 一 个 函数 有 相同 的 结果 。apply() 接 受 两 个 
参数 : 第 一 个 是 在 函数 内 部 绑 定 到 this 上 的 对 象 ， 第 二 个 是 一 个 参数 数组 ， 参 数 数组 会 在 函数 
内 部 变 成 一 个 类 似 数组 的 arguments 对 象 。 如 果 第 一 个 参数 为 null， 那 么 this 将 指向 全 局 对 象 ， 
这 正 是 当 你 调用 一 个 函数 〈 且 这 个 函数 不 是 某 个 对 象 的 方法 ) 时 发 生 的 事情 。 


当 一 个 函数 是 一 个 对 象 的 方法 时 ， 我 们 不 再 像 前 面 的 例子 一 样 传 入 null。 (译注 : 主要 是 为 了 
保证 方法 中 的 this 绑 定 到 一 个 有 效 的 对 象 而 不 是 全 局 对 象 。) 在 下 面 的 例子 中 ， 对 象 被 作为 第 
一 个 参数 传 给 apply() : 


var alien = { 
sayHi: function (who) { 
return "Hello" + (who ? ", "+ who: u) + "EI"; 
} 


}; 


alien.sayHi('world'); // "Hello, world!" 
sayHi.apply(alien, ["humans"]); // "Hello, humans!" 


在 这 个 例子 中 ，sayHi() 中 的 this 指 向 alien。 而 在 上 一 个 例子 中 ，this 是 指向 的 全 局 对 象 。 (GE 
注 : 这 个 例子 的 代码 有 误 ， 最 后 一 行 的 sayHi 并 不 能 访问 到 alien 的 sayHi 方 法 ， 需 要 使 用 
alien.sayHi.apply(alien, ["humans"]) 才 可 正确 运行 。 另 外 ， 在 sayHi 中 也 没有 出 现 this。) 


正如 上 面 两 个 例子 所 展现 出 来 的 一 样 ， 我 们 将 所 谓 的 函数 调用 当 作 函数 应 用 的 一 种 语法 糖 并 
没有 什么 太 大 的 问题 。 


需要 注意 的 是 ， 除 了 apply() 之 外 ，Function.prototype 对 象 还 有 一 个 call() 方 法 ， 但 是 它 仍然 只 
是 apply() 的 一 种 语法 糖 。 (译注 : 这 两 个 方法 的 区 别 在 于 ，apply() 只 接受 两 个 参数 ， 第 二 个 
参数 为 需要 传 给 函数 的 参数 数组 ， 而 call() 则 接受 任意 多 个 参数 ， 从 第 二 个 开始 将 参数 依次 传 
给 函数 。) 不 过 有 种 情况 下 使 用 这 个 语法 糖 会 更 好 : 当 你 的 函数 只 接受 一 个 参数 的 时 候 ， 你 
可 以 省 去 为 唯一 的 一 个 元 素 创 建 数组 的 工作 : 


// the second is more efficient, saves an array 
sayHi.apply(alien, ["humans"]); // "Hello, humans!" 
sayHi.call(alien, "humans"); // "Hello, humans!" 


部 分 应 用 
现在 我 们 知道 了 ， 调 用 一 个 函数 实际 上 就 是 给 它 应 用 一 堆 参 数 ， 那 是 否 能 够 只 传 一 部 分 参数 
而 不 传 全 部 呢 ? 这 实际 上 跟 我 们 手工 处 理 数学 函数 非常 类 似 。 


假设 已 经 有 了 一 个 add() 驾 数 ， 它 的 工作 是 把 x 和 y 两 个 数 加 到 一 起 。 下 面 的 代码 片段 展示 了 当 X 
为 5、y 为 4 时 的 计算 步骤 : 


// for illustration purposes 
// not valid JavaScript 


// we have this function 
function add(x, y) { 
return x + y; 


} 

// and we know the arguments 

add(5, 4); 

// step 1 -- substitute one argument 


function add(5, y) { 
return 5 + y; 
} 


// step 2 -- substitute the other argument 
function add(5, 4) { 

return 5 + 4; 
} 


在 这 个 代码 片段 中 ，step 1 和 step 2 并 不 是 有 效 的 JavaScript 代 码 ， 但 是 它 展 示 了 我 们 手工 计 
算 的 过 程 。 首 先 获得 第 一 个 参数 的 值 ， 然 后 将 未 知 的 X 和 已 知 的 值 5 替 换 到 通 数 中 。 然 后 重复 
文 个 过 程 ， 直 到 替换 掉 所 有 的 参数 。 


step 1 是 一 个 所 谓 的 部 分 应 用 的 例子 : 我 们 只 应 用 了 第 一 个 参数 。 当 你 执行 一 个 部 分 应 用 的 时 
候 并 不 能 获得 结果 (或 者 是 解决 方案 ) ， 取 而 代 之 的 是 另 一 个 函数 。 


下 面 的 代码 片段 展示 了 一 个 虚拟 的 partialApply() 方 法 的 用 法 : 


var add = function (x, y) { 
return x + y; 


}; 


// full application 
add.apply(null, [5, 4]); // 9 


// partial application 
var newadd = add.partialApply(null, [5]); 


// applying an argument to the new function 
newadd.apply(null, [4]); // 9 


正如 你 所 看 到 的 一 样 ， 部 分 应 用 给 了 我 们 另 一 个 函数 ， 这 个 函数 可 以 在 稍 后 调用 的 时 候 接受 
其 它 的 参数 。 这 实际 上 跟 add(5)(4) 是 等 价 的 ， 因 为 add(5) 返 回 了 一 个 函数 ， 这 个 函数 可 以 使 
用 (4) 来 调用 。 我 们 又 一 次 看 到 ， 熟 悉 的 add(5, 4) 也 差不多 是 add(5)(4) 的 一 种 语法 糖 。 


现在 ， 让 我 们 回 到 地 球 : 并 不 存在 这 样 的 一 个 partialApply() 有 函数， 并且 函数 的 默认 表现 也 不 会 
像 上 面 的 例子 中 那样 。 但 是 你 完全 可 以 自己 去 写 ， 因 为 JavaScript 的 动态 特性 完全 可 以 做 到 这 
样 。 


让 函数 理解 并 且 处 理 部 分 应 用 的 过 程 ， 叫 柯 里 化 (Currying) ° 


柯 里 化 (Currying ) 


柯 里 化 和 辛辣 的 印度 菜 可 没什么 关系 ; 它 来 自 数学 家 Haskell Curry。 (Haskell 编 程 语言 也 是 
因 他 而 得 名 。) 柯 里 化 是 一 个 变换 函数 的 过 程 。 柯 里 化 的 另外 一 个 名 字 也 叫 
schonfinkelisation ， 来 自 另 一 位 数学 家 一 一 Moses Schonfinkelisation 一 一 这 种 变换 的 最 初 发 
明 者 o 


所 以 我 们 怎样 对 一 个 函数 进行 柯 里 化 呢 ? 其 它 的 函数 式 编程 语言 也 许 已 经 原生 提供 了 支持 并 
且 所 有 的 函数 已 经 默认 柯 里 化 了 。 在 JavaScript 中 我 们 可 以 修改 一 下 add() 有 函数 使 它 柯 里 化 ， 
然后 支持 部 分 应 用 。 


来 看 一 个 例子 : 


// a curried add() 
// accepts partial list of arguments 
function add(x, y) { 
var oldx = x, oldy = y; 
if (typeof oldy === "undefined") { // partial 
return function (newy) { 
return oldx + newy; 


}; 


} 
// full application 
return x + y; 


} 


// test 
typeof add(5); // "function" 
add(3)(4); // 7 


// create and store a new function 
var add2000 = add(2000); 
add2000(10); // 2010 


在 这 段 代码 中 ， 第 一 次 调用 add() 时 ， 在 返回 的 内 层 函 数 那 里 创建 了 一 个 闭 包 。 这 个 闭 包 将 原 
来 的 x 和 y 的 值 存 储 到 了 oldx 和 oldy 中 。 当 内 层 函 数 执 行 的 时 候 ，oldx 会 被 使 用 。 如 果 没 有 部 分 
应 用 ， 即 x 和 y 都 传 了 值 ， 那 么 这 个 函数 会 简单 地 将 他 们 相 加 。 这 个 add() 函 数 的 实现 跟 实 际 情 
况 比 起 来 有 些 宛 余 ， 仅 仅 是 为 了 更 好 地 说 明 问 题 。 下 面 的 代码 片段 中 展示 了 一 个 更 简洁 的 版 

本 ， 没 有 oldx 和 oldy， 因 为 原始 的 x 已 经 被 存储 到 了 闭 包 中 ， 此 外 我 们 复 用 了 y 作 为 本 地 变量 ， 
而 不 用 像 之 前 那样 新 定义 一 个 变量 newy : 


// a curried add 
// accepts partial list of arguments 
function add(x, y) { 
if (typeof y === "undefined") { // partial 
return function (y) { 
return x + y; 


}; 


} 
// full application 
return x + y; 


在 这 些 例子 中 ，add() 函 数 自己 处 理 了 部 分 应 用 。 有 没有 可 能 用 一 种 更 为 通用 的 方式 来 做 同样 
的 事情 呢 ? 换 名 话说， 我 们 能 不 能 对 任意 一 个 函数 进行 处 理 ， 得 到 一 个 新 函数 ， 使 它 可 以 处 
理 部 分 参数 ?下 面 的 代码 片段 展示 了 一 个 通用 函数 的 例子 ， 我 们 叫 它 schonfinkelize()， 正 是 


用 来 做 这 个 的 。 我 们 使 用 schonfinkelize() 这 个 名 字 ， 一 部 分 原因 是 它 比 较 难 发 音 ， 另 一 部 分 
原因 是 它 听 起 来 比较 像 动 词 〈 使 用 "curry" 则 不 是 那么 明确 ) ， 而 我 们 刚好 需要 一 个 动词 来 表明 
这 是 一 个 函数 转换 的 过 程 。 


这 是 一 个 通用 的 柯 里 化 函数 : 


function schonfinkelize(fn) { 

var slice = Array.prototype.slice, 

stored_args = slice.call(arguments, 1); 

return function () { 
var new_args = slice.call(arguments), 
args = stored_args.concat(new_args); 
return fn.apply(null, args); 

J; 
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组 。 从 Array.prototype 中 借用 slice() 方 法 帮助 我 们 将 arguments 转 换 成 数组 ， 以 便 能 更 好 地 对 
它 进行 操作 。 当 schonfinkelize() 第 一 次 被 调用 的 时 候 ， 它 使 用 slice 变 量 存储 了 对 slice() 方 法 的 
引用 ， 同 时 也 存储 了 调用 时 的 除去 第 一 个 之 外 的 参数 (stored args) ， 因 为 第 一 个 参数 是 要 
被 柯 里 化 的 函数 。schonfinkelize() 返 回 了 一 个 函数 。 当 这 个 返回 的 函数 被 调用 的 时 候 ， 它 可 
以 (GAH) 访问 到 已 经 存储 的 参数 stored_args 和 slice。 新 的 函数 只 需要 合并 老 的 部 分 应 
用 的 参数 (stored_args) 和 新 的 参数 (new_args) ， 然 后 将 它们 应 用 到 原来 的 函数 fn (也 可 
以 在 闭 包 中 访问 到 ) 即 可 。 


现在 有 了 通用 的 柯 里 化 函数 ， 就 可 以 做 一 些 测试 了 : 


// a normal function 
function add(x, y) { 
return x + y; 

} 


// curry a function to get a new function 
var newadd = schonfinkelize(add, 5); 
newadd(4); // 9 


// another option -- call the new function directly 
schonfinkelize(add, 6)(7); // 13 


用 来 做 函数 转换 的 schonfinkelize() 并 不 局 限于 单个 参数 或 者 单 步 的 柯 里 化 。 这 里 有 些 更 多 用 
法 的 例子 : 


// a normal function 
function add(a, b, c, d, e) { 
returna+b+c+t+dte; 


// works with any number of arguments 
schonfinkelize(add, 1, 2, 3)(5, 5); // 16 
// two-step currying 

var addOne = schonfinkelize(add, 1); 
addOne(10, 10, 10, 10); // 41 


var addSix = schonfinkelize(addOne, 2, 3); 
addSix(5, 5); // 16 


什么 时 候 使 用 柯 里 化 


当 你 发 现 自己 在 调用 同样 的 函数 并 且 传 入 的 参数 大 部 分 都 相同 的 时 候 ， 就 是 考虑 柯 里 化 的 理 
重复 的 参数 (所 以 你 不 需要 再 每 次 都 传 入 ) ， 然 后 再 在 调用 原始 函数 的 时 候 将 整个 参数 列表 
补 全 ， 正 如 原始 函数 期 待 的 那样 。 


在 JavaScript 中 ， 开 发 者 对 函数 的 理解 和 运用 的 要 求 是 比较 苛刻 的 。 在 本 章 中 ， 主 要 讨论 了 有 
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1. 函数 是 一 等 对 象 ， 他 们 可 以 被 作为 值 传递 ， 也 可 以 拥有 属性 和 方法 。 
2， 函 数 拥有 本 地 作用 域 ， 而 大 括号 不 产生 块 级 作用 域 。 另 外 需要 注意 的 是 ， 变 量 的 声明 会 
被 提前 到 本 地 作用 域 顶部 。 


创建 一 个 函数 的 语法 有 : 


1. 带 有 名 字 的 函数 表达 式 
2. 元 数 表 达 式 (和 上 一 种 一 样 ， 但 是 没有 名 字 ) ， 也 就 是 为 大 家 熟知 的 “匿名 函数 " 
3， 却 数 声明 ， 与 其 它 语言 的 函数 语法 相似 


在 介绍 完 背景 和 函数 的 语法 后 ， 介 绍 了 一 些 有 用 的 模式 ， 按 分 类 列 出 : 
1. API 模 式 ， 它 们 帮助 我 们 为 函数 给 出 更 干净 的 接口 ， 包 括 : 
o 回调 模式 


传 入 一 个 函数 作为 参数 


o 配置 对 象 


帮助 保持 函数 的 参数 数量 可 控 


o 返回 函数 


函数 的 返回 值 是 另 一 个 函数 


o 柯 里 化 


新 函数 在 已 有 函数 的 基础 上 再 加 上 一 部 分 参数 构成 


2. 初始 化 模式 ， 这 些 模式 帮助 我 们 用 一 种 干净 的 、 结 构 化 的 方法 来 做 一 些 初 始 化 工作 (在 


web 页 面 和 应 用 中 非常 常见 ) ， 通 过 一 些 临时 变量 来 保证 不 污染 全 局 命名 空间 。 这 些 模式 


包括 : 


当 它 们 被 定义 后 立即 执行 


o 立即 初始 化 的 对 象 


初始 化 工作 被 放 入 一 个 匿名 对 象 ， 这 个 对 象 提供 一 个 可 以 立即 被 执行 的 方法 


o 条 件 初 始 化 


使 分 支 代 码 只 在 初始 化 的 时 候 执 行 一 次 ， 而 不 是 在 整个 程序 生命 周期 中 反复 执行 


3. 性 能 模式 ， 这 些 模式 帮助 提高 代码 的 执行 速度 ， 包 括 : 
o Memoization 


利用 函数 的 属性 ， 使 已 经 计算 过 的 值 不 用 再 次 计算 


重 写 自身 的 函数 体 ， 使 第 二 次 及 后 续 的 调用 做 更 少 的 工作 
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在 JavaScript 中 创建 对 BARE 多 一 “可 以 通过 使 用 对 象 直接 量 或 者 构造 函数 £ 本 章 将 在 此 基础 
上 介绍 一 些 常用 的 对 象 创建 模式 。 


JavaScript 语 言 本 身 简单 、 直 观 ， 通 常 也 没有 其 他 语言 那样 的 语法 特性 : 命名 空间 、 模 块 、 
包 、 私 有 属性 以 及 静态 成 员 。 本 章 将 介绍 一 些 常用 的 模式 ， 以 此 实现 这 些 语法 特性 。 


我 们 将 对 命名 空间 、 依 赖 声 明 、 模 块 模式 以 及 沙 箱 模 式 进 行 初探 一 一 它们 帮助 更 好 地 组 织 应 
用 程序 的 代码 ， 有 效 地 减轻 全 局 污染 的 问题 。 除 此 之 外 ， 还 会 对 包括 : 私有 和 特权 成 员 、 静 
态 和 私有 静态 成 员 、 对 象 常 量 、 链 以 及 类 式 函 数 定义 方式 在 内 的 话题 进行 讨论 。 


命名 空间 模式 (Namespace Pattern ) 


命名 空间 可 以 帮助 减少 全 局 变量 的 数量 ， 与 此 同时 ， 还 能 有 效 地 避免 命名 冲突 、 名 称 前 缓 的 
滥用 。 


JavaScript 黑 认 语法 并 不 支持 命名 空间 ， 但 很 容易 可 以 实现 此 特性 。 为 了 避免 产生 全 局 污染 ， 
你 可 以 为 应 用 或 者 类 库 创 建 一 个 (通常 就 一 个 ) 全 局 对 象 ， 然 后 将 所 有 的 功能 都 添加 到 这 个 
对 象 上 ， 而 不 是 到 处 申明 大 量 的 全 局 函数 、 全 局 对 象 以 及 其 他 全 局 变量 。 


看 如 下 例子 : 


// BEFORE: 5 globals 

// Warning: antipattern 
// constructors 
function Parent() {} 
function Child() {} 

// a variable 

var some_var = 1; 


// some objects 

var module1 = {}; 
module1.data = {a: 1, b: 2}; 
var module2 = {}; 


可 以 通过 创建 一 个 全 局 对 象 (通常 代表 应 用 名 ) 来 重 构 上 述 这 类 代码 ， 比 方 说 ，MYAPP ， 然 
后 将 上 述 例子 中 的 函数 和 变量 都 变 为 该 全 局 对 象 的 属性 : 


pe 


// AFTER: 1 global 
// global object 
var MYAPP = {}; 


// constructors 
MYAPP.Parent = function () {}; 
MYAPP.Child = function () {}; 


// a variable 
MYAPP.some_var = 1; 


// an object container 
MYAPP.modules = {}; 


// nested objects 

MYAPP . modules .module1 = {}; 
MYAPP.modules.module1.data = {a: 1, b: 2}; 
MYAPP . modules .module2 = {}; 


这 里 的 MYAPP 就 是 命名 空间 对 象 ， 对 象 名 可 以 随便 取 ， 可 以 是 应 用 名 、 类 库 名 、 域 名 或 者 是 
公司 名 都 可 以 。 开 发 者 经 常 约定 全 局 变量 都 采用 大 写 (所 有 字母 都 大 写 ) ， 这 样 可 以 显得 比 
较 突出 (不 过 ， 要 记 住 ， 一 般 大 写 的 变量 都 用 于 表示 常量 ) 。 


这 种 模式 是 一 种 很 好 的 提供 命名 空间 的 方式 ， 避 免 了 自身 代码 的 命名 冲突 ， 同 时 还 避免 了 同 
个 页 面 上 自身 代码 和 第 三 方 代码 (比如 : JavaScript 类 库 或 者 小 部 件 ) 的 冲突 。 这 种 模式 在 
大 多 数 情况 下 非常 适用 ， 但 也 有 它 的 缺点 : 


o 代码 量 稍 有 增加 ; 在 每 个 函数 和 变量 前 加 上 这 个 命名 空间 对 象 的 前 级 ， 会 增加 代码 量 ， 
增 大 文件 大 小 

© 该 全 局 实例 可 以 被 随时 修改 

o 命名 的 深度 衣 套 会 减 慢 属性 值 的 查询 


本 章 后 续 要 介绍 的 沙 箱 模式 则 可 以 避免 这 些 缺 点 。 


通用 命名 空间 有 函数 


随 着 程序 复杂 度 的 提高 ， 代 码 会 分 置 在 不 同 的 文件 中 以 特定 顺序 来 加 载 ， 这 样 一 来 ， 就 不 能 
保证 你 的 代码 一 定 是 第 一 个 申明 命名 空间 或 者 改变 量 下 的 属性 的 。 甚 至 还 会 发 生 属性 履 盖 的 
问题 。 所 以 ， 在 创建 命名 空间 或 者 添加 属性 的 时 候 ， 最 好 先 检查 下 是 否 存 在 ， 如 下 所 示 : 


// unsafe 

var MYAPP = {}; 

// better 

if (typeof MYAPP === "undefined") { 


var MYAPP = {}; 


// or shorter 
var MYAPP = MYAPP || {}; 


如 上 所 示 ， 不 难看 出 ， 如 果 每 次 做 类 似 操 作 都 要 这 样 检 查 一 下 就 会 有 很 多 重复 性 的 代码 。 比 
方 说 ， 要 申明 MYAPP.modules.module2， 就 要 重复 三 次 这 样 的 检查 。 以 ， 我 们 需要 一 个 
重用 的 namespace() 函 数 来 专门 处 理 这 些 检查 工作 ， 然 后 用 它 来 创建 命名 空间 ， 如 下 所 示 : 


// using a namespace function 
MYAPP . namespace ( 'MYAPP.modules.module2' ); 


// equivalent to: 
// var MYAPP = { 
// modules: { 
// module2: 人 


下 面 是 上 述 namespace 函 数 的 实现 案例 。 这 种 实现 是 无 损 的 ， 意 味 着 如 果 要 创建 的 命名 空间 
已 经 存在 ， 则 不 会 再 重复 创建 : 


var MYAPP = MYAPP || {}; 
MYAPP ,namespace = function (ns_string) { 
var parts = ns_string.split('.'), 
parent = MYAPP, 
1; 


// strip redundant leading global 
if (parts[0] === "MYAPP") { 

parts = parts.slice(1); 
} 


for (i = 0; i < parts.length; i += 1) { 
// create a property if it doesn't exist 
if (typeof parent[parts[i]] === "undefined") { 
parent[parts[i]] = {}; 
} 


parent = parent[parts[i]]; 


} 


return parent; 


}; 


上 述 实现 支持 如 下 使 用 : 


// assign returned value to a local var 
var module2 = MYAPP.namespace( 'MYAPP.modules.module2' ); 
module2 === MYAPP.modules.module2; // true 


// skip initial ~MYAPP~ 
MYAPP.namespace('modules.module51'); 


// long namespace 
MYAPP.namespace('once.upon.a.time.there.was.this.long.nested.property'); 


图 5-1 展示 了 上 述 代码 创建 的 命名 空间 对 象 在 Firebug 下 的 可 视 结果 





window Object 


Y modules Object { module2«Object, more. } 

module? Object { } 
moduteSi Object { } 

Y once Object { upon-Object } 

Y upon Object { #-Object } 

va Object { time-Object } 

Y time Object { there«Object } 

Y there Object { was-Object } 

v was Object { this-Object } 

Y this Object { tong-Object } 

Y long Object { nested«Object } 
Y nested Object { property-Object } 

property Object { } 


namespace function() 





图 5-1 MYAPP 命 名 空间 在 Firebug 下 的 可 视 结 果 


声明 依赖 


JavaScript 库 往往 是 模块 化 而 且 有 用 到 命名 空间 的 ， 这 使 用 你 可 以 只 使 用 你 需要 的 模块 。 比 如 
在 YUI2 中 ， 全 局 变量 YAHOO 就 是 一 个 命名 室 间 ， 各 个 模块 作为 全 局 变量 的 属性 ， 比 如 
YAHOO.util.Dom (DOM 模 块 ) 、YAHOOL.util.Event (事件 模块 ) 。 


将 你 的 代码 依赖 在 函数 或 者 模块 的 顶部 进行 声明 是 一 个 好 主意 。 声 明 就 是 创建 一 个 本 地 变 
量 ， 指 向 你 需要 用 到 的 模块 : 


var myFunction = function () { 
// dependencies 
var event = YAHOO.util.Event, 
dom = YAHOO.util.Dom; 


// use event and dom variables 
// for the rest of the function... 
J; 


这 是 一 个 相当 简单 的 模式 ， 但 是 有 很 多 的 好 处 : 


。 明确 的 声明 依赖 是 告知 你 代码 的 用 户 ， 需 要 保证 指定 的 脚本 文件 被 包含 在 页 面 中 。 

o 将 声明 放 在 函数 顶部 使 得 依赖 很 容易 被 查找 和 解析 。 

。 本 地 变量 (如 dom) 永远 会 比 全 局 变量 (YAHOO) 要 快 ， 甚 至 比 全 局 变量 的 属性 (如 
YAHOO.util.Dom) 还 要 快 ， 这 样 会 有 更 好 的 性 能 。 使 用 了 依赖 声明 模式 之 后 ， 全 局 变量 
的 解析 在 函数 中 只 会 进行 一 次 ， 在 此 之 后 将 会 使 用 更 快 的 本 地 变量 。 

e 一 些 高 级 的 代码 压缩 工具 比如 YUI Compressor 和 Google Closure compiler 会 重 命名 本 地 
变量 〈 比 如 event 可 能 会 被 压缩 成 一 个 字母 ， 如 A) ， 这 会 使 代码 更 精简 ， 但 这 个 操作 不 
会 对 全 局 变量 进行 ， 因 为 这 样 做 不 安全 。 


下 面 的 代码 片段 是 关于 是 否 使 用 依赖 声明 模式 对 压缩 影响 的 展示 。 尽 管 使 用 了 依赖 声明 模式 
的 test2() 看 起 来 复杂 ， 因 为 需要 更 多 的 代码 行 数 和 一 个 额外 的 变量 ， 但 在 压缩 后 它 的 代码 量 却 
会 更 小 ， 意 味 着 用 户 只 需要 下 载 更 少 的 代码 : 


function test1() { 
alert(MYAPP.modules.m1); 
alert(MYAPP.modules.m2); 
alert(MYAPP.modules.m51); 


} 


fe 

minified test1 body: 

alert (MYAPP.modules.m1);alert(MYAPP.modules.m2);alert(MYAPP.modules.m51) 
7 


function test2() { 
var modules = MYAPP.modules; 
alert(modules.m1); 
alert(modules.m2); 
alert(modules.m51); 


} 
Pe 
minified test2 body: 


var a=MYAPP.modules;alert(a.m1);alert(a.m2);alert(a.m51) 
s 


私有 属性 和 方法 


JavaScript 不 像 Java 或 者 其 它 语言 ， 它 没有 专门 的 提供 私有 、 人 保护、 公有 属性 和 方法 的 语法 。 
所 有 的 对 象 成 员 都 是 公有 的 : 
var myobj = { 
myprop: 1, 


getProp: function () { 
return this.myprop; 
} 
}; 


console.log(myobj.myprop); // ‘myprop is publicly accessible console.log(myobj.getProp() 
EE 
当 你 使 用 构造 函数 创建 对 象 的 时 候 也 是 一 样 的 ， 所 有 的 成 员 都 是 公有 的 : 





function Gadget() { 

this.name = 'iPod'; 

this.stretch = function () { 

return 'iPad'; 

J; 
} 
var toy = new Gadget(); 
console.log(toy.name); // ~“name~ is public console.log(toy.stretch()); // stretch() is pu 





私有 成 员 


尽管 语言 并 没有 用 于 私有 成 员 的 专门 语法 ， 但 你 可 以 通过 闭 包 来 实现 。 在 构造 函数 中 创建 一 
个 闭 包 ， 任 何在 这 个 闭 包 中 的 部 分 都 不 会 暴露 到 构造 函数 之 外 。 但 是 ， 这 些 私 有 变量 却 可 以 
被 公有 方法 访问 ， 也 就 是 在 构造 函数 中 定义 的 并 且 作 为 返回 对 象 一 部 分 的 那些 方法 。 我 们 来 
看 一 个 例子 ，name 是 一 个 私有 成 员 ， 在 构造 函数 之 外 不 能 被 访问 : 


function Gadget() { 
// private member 
var name = 'iPod'; 
// public function 
this.getName = function () { 
return name; 


J; 
} 
var toy = new Gadget(); 
// ~“name~ is undefined, it's private 
console.log(toy.name); // undefined 


// public method has access to “name 
console.log(toy.getName()); // "iPod" 


如 你 所 见 ， 在 JavaScript 创 建 私 有 成 员 很 容易 。 你 需要 做 的 只 是 将 私有 成 员 放 在 一 个 函数 中 ， 
保证 它 是 函数 的 本 地 变量 ， 也 就 是 说 让 它 在 函数 之 外 不 可 以 被 访问 。 


特权 方法 


特权 方法 的 概念 不 涉及 到 任何 语法 ， 它 只 是 一 个 给 可 以 访问 到 私有 成 员 的 公有 方法 的 名 字 
(就 像 它 们 有 更 多 权限 一 样 ) 。 


在 前 面 的 例子 中 ，getName() 就 是 一 个 特权 方法 ， 因 为 它 有 访问 name 属 性 的 特殊 权限 。 


私有 成 员 失效 
当 你 使 用 私有 成 员 时 ， 需 要 考虑 一 些 极端 情况 : 


e 在 Firefox 的 一 些 早期 版 本 中 ， 允 许 通 过 给 eval() 传 递 第 二 个 参数 的 方法 来 指定 上 下 文 对 
象 ， 从 而 允许 访问 函数 的 私有 作用 域 。 比 如 在 Mozilla Rhino (译注 : 一 个 JavaScript 引 
擎 ) 中 ， 允 许 使 用 parent 来 访问 私有 作用 域 。 现 在 这 些 极 端 情况 并 没有 被 广泛 应 用 
到 浏览 器 中 。 

e 当 你 直接 通过 特权 方法 返回 一 个 私有 变量 ， 私有 变量 恰好 是 一 个 对 象 或 者 数组 
时 ， 外 部 的 代码 可 以 修改 这 个 私有 变量 ， ae eee ° 


我 们 来 看 一 下 第 二 种 情况 。 下 面 的 Gadget 的 实现 看 起 来 没有 问题 : 


function Gadget() { 
// private member 
var specs = { 
screen_width: 320, 
screen_height: 480, 
color: "white" 


}; 


// public function 
this.getSpecs = function () { 
return specs; 


}; 


这 里 的 问题 是 getSpecs() 返 回 了 一 个 specs 对 象 的 引用 。 这 使 得 Gadget 的 使 用 者 可 以 WG PLB 
隐藏 起 来 的 私有 成 员 specs : 
var toy = new Gadget(), 
specs = toy.getSpecs(); 


specs.color 
specs.price 


"black"; 
"free": 


console.dir(toy.getSpecs()); 


在 Firebug 控 制 台中 打印 出 来 的 结果 如 图 5-2 : 


图 5-2 私有 对 象 被 修改 了 


这 个 意外 的 问题 的 解决 方法 就 是 不 要 将 你 想 保 持 私 有 的 对 象 或 者 数组 的 引用 传递 出 去 。 达 到 
这 个 目标 的 一 种 方法 是 让 getSpecs() 返 回 一 个 新 对 象 ， 这 个 新 对 象 只 包含 对 象 的 使 用 者 感 兴趣 
的 数据 。 这 也 是 众所周知 的 “最 低 授权 原则 ”(Principle of Least Authority， 简 称 POLA) ， 指 
永远 不 要 给 出 比 需求 更 多 的 东西 。 在 这 个 例子 中 ， 如 果 Gadget 的 使 用 者 关注 它 是 否 适 应 一 个 
特定 的 盒子 ， 它 只 需要 知道 尺寸 即 可 。 所 以 你 应 该 创建 一 个 getDimensions()， 用 它 返回 一 个 
只 包含 width 和 height 的 新 对 象 ， 而 不 是 把 什么 都 给 出 去 。 也 就 是 说 ， 也 许 你 根本 不 需要 实现 
getSpecs() 方 法 。 

当 你 需要 传递 所 有 的 数据 时 ， 有 另外 一 种 方法 ， 就 是 使 用 通用 的 对 象 复制 函数 创建 specs 对 象 
的 一 个 副本 。 下 一 章 提 供 了 两 个 这 样 的 函数 一 一 一 个 叫 extend()， 它 会 浅 复 制 一 个 给 定 的 对 象 
(只 复制 顶层 的 成 员 ) 。 另 一 个 叫 extendDeep()， 它 会 做 深 复制 ， 人 遍历 所 有 的 属性 和 嵌 套 的 

属性 。 


对 象 字 面 量 和 私有 成 员 


到 目前 为 止 ， 我 们 只 看 了 使 用 构建 函数 创建 私有 成 员 的 示例 。 如 果 使 用 对 象 字面 量 创建 对 象 
时 会 是 什么 情况 呢 ? 是 否 有 可 能 含有 私有 成 员 ? 


如 你 前 面 所 看 到 的 那样 ， 私 有 数据 使 用 一 个 函数 来 包 襄 。 所 以 在 使 用 对 萌 字 面 量 时 ， 你 也 可 
以 使 用 一 个 立即 执行 的 匿名 部 数 创 建 的 闭 包 。 例 如 : 


var myobj; // this will be the object 
(function () { 

// private members 

var name = "my, oh my"; 


// implement the public part 
// note -- no `var` 
myobj = { 
// privileged method 
getName: function () { 
return name; 
} 


}; 
}()); 


myobj.getName(); // "my, oh my" 


还 有 一 个 原理 一 样 但 看 起 来 不 一 样 的 实现 示例 : 


var myobj = (function () { 
// private members 
var name = "my, oh my"; 


// implement the public part 
return { 


getName: function () { 
return name; 
} 


J; 
30); 
myobj.getName(); // "my, oh my" 


这 个 例子 也 是 所 谓 的 “模块 模式 "的 基础 ， 我 们 稍 后 将 讲 到 它 。 


原型 和 私有 成 员 


使 用 构造 函数 创建 私有 成 员 的 一 个 弊端 是 ， 每 一 次 调用 构造 函数 创建 对 象 时 这 些 私 有 成 员 都 
会 被 创建 一 次 。 


这 对 在 构建 函数 中 添加 到 this 的 成 员 来 说 是 一 个 问题 。 为 了 避免 重复 劳动 ， 节 省 内 存 ， 你 可 
以 将 共用 的 属性 和 方法 添加 到 构造 函数 的 prototype (原型 ) 属性 中 。 这 样 的 话 这 些 公共 的 
部 分 会 在 使 用 同一 个 构造 子 数 创建 的 所 有 实例 中 共享 。 你 也 同样 可 以 在 这 些 实例 中 共享 私有 
成 员 。 你 可 以 将 两 种 模式 联合 起 来 达到 这 个 目的 : 构造 函数 中 的 私有 属性 和 对 象 字面 量 中 的 
私有 属性 。 因 为 prototype 属性 也 只 是 一 个 对 象 ， 可 以 使 用 对 象 字面 量 创建 。 


这 是 一 个 示例 : 


function Gadget() { 
// private member 
var name = 'iPod'; 
// public function 
this.getName = function () { 
return name; 
}; 
} 


Gadget.prototype = (function () { 
// private member 


var browser = "Mobile Webkit"; 
// public prototype members 
return { 


getBrowser: function () { 
return browser; 
} 


}; 
KOD, 


var toy = new Gadget(); 
console.log(toy.getName()); // privileged "own" method console.log(toy.getBrowser()); // 


E = ; 
将 私有 函数 暴露 为 公有 方法 


“暴露 模式 "是 指 将 已 经 有 的 私有 函数 暴露 为 公有 方法 。 当 对 对 象 进 行 操 作 时 ， 所 有 功能 代码 都 
对 这 些 操作 很 敏感 ， 而 你 想 尽 量 保护 这 些 代码 的 时 候 很 有 用 。 (译注 : 指 对 来 自 外 部 的 修改 
很 敏感 。) 但 同时 ， 你 又 希望 能 提供 一 些 功能 的 访问 权限 ， 因 为 它们 会 被 用 到 。 如 果 你 把 这 
些 方法 公开 ， 就 会 使 得 它们 不 再 健壮 ， 你 的 API 的 使 用 者 可 能 修改 它们 。 在 ECMAScript5 中 > 
你 可 以 选择 冻结 一 个 对 象 ， 但 在 之 前 的 版 本 中 不 可 用 。 下 面 进入 暴露 模式 (原来 是 由 
Christian Heilmann 创 造 的 模式 ， 叫 “暴露 模块 模式 ") 。 





我 们 来 看 一 个 例子 ， 它 建立 在 对 象 字 面 量 的 私有 成 员 模式 之 上 : 


var myarray 
(function () { 


var astr = "[object Array]", 
toString = Object.prototype. toString; 


function isArray(a) { 
return toString.call(a) === astr; 
} 


function indexOf(haystack, needle) { 
var i= 0, 
max = haystack.length; 
for (; i < max; i += 1) { 
if (haystack[i] === needle) { 
return i; 
} 
} 


return -1; 


} 

myarray = { 
isArray: isArray, 
indexOf: indexOf, 
inArray: indexOf 


Y; 
+0); 


这 里 有 两 个 私有 变量 和 两 个 私有 元 数 isArray() 和 indexof() 。 在 包 庄 函数 的 最 后 ， 使 用 
那些 允许 被 从 外 部 访问 的 函数 卉 充 myarray 对 象 。 在 这 个 例子 中 ， 同 一 个 私有 函数 

indexof() 同时 被 暴露 为 ECMAScript 5 风格 的 indexof 和 PHP 风 格 的 inarry 。 测 试 一 下 
myarray 对 象 : 





myarray.isArray([1,2]); // true 
myarray.isArray({0: 1}); // false 
myarray.indexof(["a", "b", "z"], "z"); // 2 
myarray.inArray(["a", "b", "z"], "z"); // 2 


现在 假如 有 一 些 意外 的 情况 发 生 在 暴露 的 indexof() 方法 上 ， 私 有 的 indexof() 方法 仍然 是 安 
全 的 ， 因 此 inArray() 仍然 可 以 正常 工作 : 


myarray.indexOf = null; 
myarray.inArray(["a", "b", "z"], "z"); // 2 


模块 模式 


模块 模式 使 用 得 很 广泛 ， 因 为 它 可 以 为 代码 提供 特定 的 结构 ， 帮 助 组 织 日 益 增 长 的 代码 。 不 
像 其 它 语言 ， IVRES 的 “ 包 ” (package) 的 语法 ， 但 模块 模式 提供 了 用 于 创建 独 
立 解 耦 的 代码 片段 的 工具 ， 这 些 代码 可 以 被 当成 黑 盒 ， 当 你 正在 写 的 软件 需求 发 生变 化 时 ， 
这 些 代码 可 以 被 添加 、 赫 换 、 移 除 。 


模块 模式 是 我 们 目前 讨论 过 的 好 几 种 模式 的 组 合 ， 即 : 


。 命名 空间 模式 
© 立即 执行 的 函数 模式 
© 私有 和 特权 成 员 模 式 
o 依赖 声明 模式 


第 一 步 是 初始 化 一 个 命名 空间 。 我 们 使 用 本 章 前 面部 分 的 namespace() 函数 ， 创 建 一 个 提供 数 
组 相关 方法 的 套件 模块 : 


MYAPP.namespace('MYAPP.utilities.array'); 


下 一 步 是 定义 模块 。 使 用 一 个 立即 执行 的 函数 来 提供 私有 作用 域 供 私有 成 员 使 用 。 立 即 执行 
的 函数 返回 一 个 对 象 ， 也 就 是 带 有 公有 接口 的 真 正 的 模块 ， 可 以 供 其 它 代码 使 用 : 


MYAPP.utilities.array = (function () { 
return { 
// todo... 


J; 
70); 
下 一 步 ， 给 公有 接口 添加 一 些 方法 : 


MYAPP.utilities.array = (function () { 


return { 
inArray: function (needle, haystack) { 
WE cede 
}, 
isArray: function (a) { 
Hike ton 
} 
J; 
30); 


如 果 需 要 的 话 ， 你 可 以 在 立即 执行 的 函数 提供 的 闭 包 中 声明 私有 属性 和 私有 方法 。 函 数 顶 部 
也 是 声明 依赖 的 地 方 。 在 变量 声明 的 下 方 ， 你 可 以 选择 性 地 放置 辅助 初始 化 模块 的 一 次 性 代 
码 。 郊 数 最 终 返 回 的 是 一 个 包含 模块 公共 API| 的 对 象 : 


MYAPP.namespace('MYAPP.utilities.array'); MYAPP utilities.array = (function () { 


// dependencies 
var uobj = MYAPP.utilities.object, 
ulang = MYAPP.utilities.lang, 


// private properties 
array_string = "[object Array]", 
ops = Object.prototype.toString; 


// private methods 
EE ee 
// end var 


// optionally one-time init procedures 
WE 5 


// public API 
return { 


inArray: function (needle, haystack) { 
for (var i = 0, max = haystack.length; i < max; i += 1) { 
if (haystack[i] === needle) { 
return true; 


} 

} 
}, 
isArray: function (a) { 

return ops.call(a) === array_string; 
} 
// ... more methods and properties 

J; 


模块 模式 被 广泛 使 用 ， 这 是 一 种 值得 强烈 推荐 的 模式 ， 它 可 以 帮助 组 织 代码 ， 尤 其 是 代码 量 
在 不 断 增长 的 时 候 。 
暴露 模块 模式 


我 们 在 本 章 中 讨论 私有 成 员 模 式 时 已 经 讨论 过 暴露 模式 。 模 块 模式 也 可 以 用 类 似 的 方法 来 组 
织 ， 将 所 有 的 方法 保持 私有 ， 只 在 最 后 暴露 需要 使 用 的 方法 来 初始 化 API。 


上 面 的 例子 可 以 变 成 这 样 : 


MYAPP.utilities.array = (function () { 


// private properties 
var array_string = "[object Array]", 
ops = Object.prototype.toString, 


// private methods 
inArray = function (haystack, needle) { 
for (var i = 0, max = haystack.length; i < max; i += 1) { 


if (haystack[i] === needle) { 
return i; 
} 
return -1; 
}, 
isArray = function (a) { 
return ops.call(a) === array_string; 
}; 


// end var 
// revealing public API 
return { 


isArray: isArray, 
indexOf: inArray 


Y; 
}()); 


创建 构造 函数 的 模块 


前 面 的 例子 创建 了 一 个 对 象 MYAPP.utilities.array ， 但 有 时 候 使 用 构造 函数 来 创建 对 象 会 更 
方便 。 你 也 可 以 同样 使 用 模块 模式 来 做 。 唯 一 的 区 别 是 包 庄 模块 的 立即 执行 的 函数 会 在 最 后 
返回 一 个 函数 ， 而 不 是 一 个 对 象 。 


看 下 面 的 模块 模式 的 例子 ， 创 建 了 一 个 构造 函数 MYAPP.utilities.Array 


MYAPP.namespace('MYAPP.utilities.Array'); 
MYAPP.utilities.Array = (function () { 


// dependencies 
var uobj = MYAPP.utilities.object, 
ulang = MYAPP.utilities.lang, 


// private properties and methods... 
Constr; 


// end var 


// optionally one-time init procedures 
HU vac 


// public API -- constructor 
Constr = function (o) { 
this.elements = this.toArray(o); 
J; 
// public API -- prototype 
Constr.prototype = { 
constructor: MYAPP.utilities.Array, 
version: "2.0", 
toArray: function (obj) { 
for (var i= 0, a = [], len = obj.length; i < len; i += 1) { 
a[i] = obj[i]; 
} 


return a; 
J; 


// return the constructor 
// to be assigned to the new namespace return Constr; 


}()); 


像 这 样 使 用 这 个 新 的 构造 函数 : 


var arr = new MYAPP.utilities.Array(obj); 


在 模块 中 引入 全 局 上 下 文 


作为 这 种 模式 的 一 个 常见 的 变种 ， 你 可 以 给 包 衰 模块 的 立即 执行 的 济 数 传递 参数 。 你 可 以 传 
递 任何 值 ， 但 通常 会 传递 全 局 变量 甚至 是 全 局 对 象 本 身 。 引 入 全 局 上 下 文 可 以 加 快 函 数 内 部 
的 全 局 变量 的 解析 ， 因 为 引入 之 后 会 作为 函数 的 本 地 变量 : 


MYAPP.utilities.module = (function (app, global) { 
// references to the global object 
// and to the global app namespace object 
// are now localized 


}(MYAPP, this)); 


沙 箱 模 式 


沙 箱 模 式 主要 着 眼 于 命名 空间 模式 的 短处 ， 即 : 
© 依赖 一 个 全 局 变量 成 为 应 用 的 全 局 命名 空间 。 在 命名 空间 模式 中 ， 没 有 办 法 在 同一 个 页 
面 中 运行 同一 个 应 用 或 者 类 库 的 不 同 版 本 ， 在 为 它们 都 会 需要 同一 个 全 局 变量 名 ， 比 
如 MYAPP ° 
。 代码 中 以 点 分 隔 的 名 字 比 较 长 ， 无 论 写 代码 还 是 解析 都 需要 处 理 这 个 很 长 的 名 字 ， 比 
如 MYAPP.utilities.array ° 
顾名思义 ， 沙 箱 模 式 为 模块 提供 了 一 个 环境 ， 模 块 在 这 个 环境 中 的 任何 行为 都 不 会 影响 其 它 
的 模块 和 其 它 模块 的 沙 箱 。 
这 个 模式 在 YUI3 中 用 得 很 多 ， 但 是 需要 记 住 的 是 ， 下 面 的 讨论 只 是 一 些 示 例 实现 ， 并 不 讨论 
YUI3 中 的 消息 箱 是 如 何 实现 的 。 


全 局 构造 函数 


在 命名 空间 模式 中 ， 有 一 个 全 局 对 象 ， 而 在 沙 箱 模 式 中 ， 唯 一 的 全 局 变量 是 一 个 构造 函数 ， 
我 们 把 它 命 名 为 sandbox() 。 我 们 使 用 这 个 构造 函数 来 创建 对 象 ， 同 时 也 要 传 入 一 个 回调 元 
数 ， 这 个 函数 会 成 为 代码 运行 的 独立 空间 。 


使 用 沙 箱 模式 是 像 这 样 : 


new Sandbox(function (box) { 
// your code here... 


3); 


box 对 象 和 命名 空间 模式 中 的 MYAPP 类 似 ， 它 包含 了 所 有 你 的 代码 需要 用 到 的 功能 。 
我 们 要 多 做 两 件 事情 : 


。 通过 一 些 手段 (第 3 章 中 的 强制 使 用 new 的 模式 ) ， 你 可 以 在 创建 对 象 的 时 候 不 要 求 一 定 
有 new。 

e 让 sandbox() 构造 函数 可 以 接受 一 个 (或 多 个 ) 额外 的 配置 参数 ， 用 于 指定 这 个 对 象 需 
要 用 到 的 模块 名 字 。 我 们 希望 代码 是 模块 化 的 ， 因 此 绝 大 部 分 sandbox() 提供 的 功能 都 
会 被 包含 在 模块 中 。 


有 了 这 两 个 额外 的 特性 之 后 ， 我 们 来 看 一 下 实例 化 对 象 的 代码 是 什么 样子 。 


你 可 以 在 创建 对 象 时 省 略 new 并 像 这 样 使 用 已 有 的 “ajax" 和 "event" 模 块 : 


Sandbox(['ajax', 'event'], function (box) { 
// console.log(box); 
}); 


下 面 的 例子 和 前 面 的 很 像 ， 但 是 模块 名 字 是 作为 独立 的 参数 传 入 的 : 


Sandbox('ajax', 'dom', function (box) { 
// console.log(box); 
3); 


使 用 通配符 " 米 ? 来 表示 "使 用 所 有 可 用 的 模块 "如 何 ? 为 了 方便 ， 我 们 也 假设 没有 任何 模块 传 入 
时 ， 沙 箱 使 用 "六 ?。 所 以 有 两 种 使 用 所 有 可 用 模块 的 方法 : 
Sandbox('*', function (box) { 
// console.log(box); 
}); 
Sandbox(function (box) { 


// console.log(box); 
}); 


下 面 的 例子 展示 了 如 何 实例 化 多 个 消息 箱 对 象 ， 你 甚至 可 以 将 它们 说 套 起 来 而 互 不 影响 : 


Sandbox('dom', 'event', function (box) { 
// work with dom and event 
Sandbox('ajax', function (box) { 

// another sandboxed "box" object 
// this "box" is not the same as 
// the "box" outside this function 


OA 


// done with Ajax 
3); 


// no trace of Ajax module here 


3); 
从 这 些 例 子 中 看 到 ， 使 用 沙 箱 模 式 可 以 通过 将 代码 包 衰 在 回调 函数 中 的 方式 来 保护 全 局 命名 
空间 。 


如 果 需 要 的 话 ， 你 也 可 以 利用 函数 也 是 对 象 这 一 事实 ， 将 一 些 数据 作为 静态 属性 存放 
到 sandbox() 构造 函数 。 


最 后 ， 你 可 以 根据 需要 的 模块 类 型 创建 不 同 的 实例 ， 这 些 实例 都 是 相互 独立 的 。 


现在 我 们 来 看 一 下 如 何 实现 sandbox() 构造 函数 和 它 的 模块 来 支持 上 面 讲 到 的 所 有 功能 。 
添加 模块 


在 动手 实现 构造 函数 之 前 ， 我 们 来 看 一 下 如 何 添加 模块 。 


Sandbox() 构造 防 数 也 是 一 个 对 象 ， 所 以 可 以 给 它 添加 一 个 modules 静态 属性 。 这 个 属性 也 
是 一 个 包含 名 值 (key-value) 对 的 对 象 ， 其 中 key 是 模块 的 名 字 ，value 是 模块 的 功能 实现 。 


Sandbox.modules = {}; 


Sandbox.modules.dom = function (box) { 
box.getElement = function () {}; 
box.getStyle = function () {}; 
box.foo = "bar"; 


}; 


Sandbox.modules.event = function (box) { 
// access to the Sandbox prototype if needed: 
// box.constructor.prototype.m = "mmm"; 
box.attachEvent = function () {}; 
box.dettachEvent = function () {}; 


}; 


Sandbox.modules.ajax = function (box) { 
box.makeRequest function () {}; 
box.getResponse function () {}; 


}; 


在 这 个 例子 中 我 们 添加 了 dom ` event 和 ajax 模块 ， 这 些 都 是 在 每 个 类 库 或 者 复杂 的 web 应 
用 中 很 常见 的 代码 片段 。 


实现 每 个 模块 功能 的 函数 接受 一 个 实例 box 作为 参数 ， 并 给 这 个 实例 添加 属性 和 方法 。 


实现 构造 函数 


最 后 ， 我 们 来 实现 sandbox() 构造 函数 (你 可 能 会 很 自然 地 想 将 这 类 构造 函数 命名 为 对 你 的 
类 库 或 者 应 用 有 意义 的 名 字 ) 


function Sandbox() { 


} 


// turning arguments into an array 
var args = Array.prototype.slice.call(arguments), 
// the last argument is the callback 
callback = args.pop(), 
// modules can be passed as an array or as individual parameters 
modules = (args[0] && typeof args[0] === "string") ? args : args[0], i; 


// make sure the function is called 
// as a constructor 
if (!(this instanceof Sandbox)) { 
return new Sandbox(modules, callback); 


} 

// add properties to “this” as needed: 
this.a = 1; 

this.b = 2; 


// now add modules to the core ‘this object 
// no modules or "*" both mean "use all modules" 
if (!modules || modules === '*') { 
modules = []; 
for (i in Sandbox.modules) { 
if (Sandbox.modules.hasOwnProperty(i)) { 
modules.push(i); 
} 


} 


// initialize the required modules 

for (i = 0; i < modules.length; i += 1) { 
Sandbox.modules[modules[i]](this); 

} 


// call the callback 
callback(this); 


// any prototype properties as needed 
Sandbox.prototype = { 


}; 


这 个 


name: "My Application", 

version: "1.0", 

getName: function () { 
return this.name; 

} 


实现 中 的 一 些 关键 点 : 


有 一 个 检查 this 是 否 是 sandbox 实例 的 过 程 ， 如 果 不 是 (也 就 是 调用 Sandbox() 时 没有 
加 new ) ， 我 们 将 这 个 函数 作为 构造 函数 再 调用 一 次 。 

你 可 以 在 构造 函数 中 给 this 添加 属性 ， 也 可 以 给 构造 函数 的 原型 添加 属性 。 

被 依赖 的 模块 可 以 以 数组 的 形式 传递 ， 也 可 以 作为 单独 的 参数 传递 ， 甚 至 以 * 通配符 
(或 者 省 略 ) 来 表示 加 载 所 有 可 用 的 模块 。 值 得 注意 的 是 ， 我 们 在 这 个 示例 实现 中 并 没 
有 考虑 从 外 部 文件 中 加 载 模块 ， 但 明显 这 是 一 个 值得 考虑 的 事情 。 比 如 YUI3 就 支持 这 种 
情况 ， 你 可 以 只 加 载 最 基本 的 模块 (作为 “种 子 ”) ， 其 余 需 要 的 任何 模块 都 通过 将 模块 名 
和 文件 名 对 应 的 方式 从 外 部 文件 中 加 载 。 

当 我 们 知道 依赖 的 模块 之 后 就 初始 化 它们 ， 也 就 是 调用 实现 每 个 模块 的 函数 。 

构造 函数 的 最 后 一 个 参数 是 回调 函数 。 这 个 回调 函数 会 在 最 后 使 用 新 创建 的 实例 来 调 

用 。 事 实 上 这 个 回调 函数 就 是 用 户 的 沙 箱 ， 它 被 传 入 一 个 box 对 象 ， 这 个 对 象 包含 了 所 


有 依赖 的 功能 。 


静态 成 员 


静态 属性 和 方法 是 指 那些 在 所 有 的 实例 中 保持 一 致 的 成 员 。 在 基于 类 的 语言 中 ， 表 态 成 员 是 
用 专门 的 语法 来 创建 ， 使 用 时 就 像 是 类 自己 的 成 员 一 样 。 比 如 Mathutils 类 的 max() 方法 会 
被 像 这 样 调用 : Mathutils.max(3，5) 。 这 是 一 个 公有 静态 成 员 的 示例 ， 即 可 以 在 不 实例 化 类 
的 情况 下 使 用 。 同 样 也 可 以 有 私有 的 静态 方法 ， 即 对 类 的 使 用 者 不 可 见 ， 而 在 类 的 所 有 实例 
间 是 共享 的 。 我 们 来 看 一 下 如 何在 JavaScript 中 实现 公有 和 私有 静态 成 员 。 


公有 静态 成 员 


在 JavaScript 中 没有 专门 用 于 静态 成 员 的 语法 。 但 通过 给 构造 函数 添加 属性 的 方法 ， 可 以 拥有 
和 基于 类 的 语言 一 样 的 使 用 语法 。 之 所 有 可 以 这 样 做 是 因为 构造 函数 和 其 它 的 函数 一 样 ， 也 
是 对 象 ， 可 以 拥有 属性 。 前 一 章 讨 论 过 的 Memoization 模 式 也 使 用 了 同样 的 方法 ， 即 给 函数 添 
加 属性 。 


下 面 的 例子 定义 了 一 个 构造 函数 Gadget ， 它 有 一 个 静态 方法 isShiny() 和 一 个 实例 方 

法 setPrice() ° isshiny() 是 一 个 静态 方法 ， 因 为 它 不 需要 指定 一 个 对 象 才 能 工作 (就 像 你 
不 需要 先 指 定 一 个 工具 (gadget) 才 知 道 所 有 的 工具 是 不 是 有 光泽 的 (shiny) ) 。 但 
setPrice() 却 需要 一 个 对 象 ， 因 为 工具 可 能 有 不 同 的 定价 : 


// constructor 
var Gadget = function () {}; 


// a static method 

Gadget.isShiny = function () { 
return "you bet"; 

J; 

// a normal method added to the prototype Gadget.prototype.setPrice = function (price) { 
this.price = price; 

}; 

图 — ë ëR 


现在 我 们 来 调用 这 些 方法 。 静 态 方法 isshiny() 可 以 直接 在 构造 函数 上 调用 ， 但 其 它 的 常规 
方法 需要 一 个 实例 : 

// calling a static method 

Gadget.isShiny(); // "you bet" 

// creating an instance and calling a method 


var iphone = new Gadget(); 
iphone.setPrice(500) ; 


使 用 静态 方法 的 调用 方式 去 调用 实例 方法 并 不 能 正常 工作 ， 同 样 ， 用 调用 实例 方法 的 方式 来 
调用 静态 方法 也 不 能 正常 工作 : 


typeof Gadget.setPrice; // "undefined" 
typeof iphone.isShiny; // "undefined" 


有 时 候 让 静态 方法 也 能 用 在 实例 上 会 很 方便 。 我 们 可 以 通过 在 原型 上 加 一 个 新 方法 来 很 容 
地 做 到 这 点 ， 这 个 新 方法 作为 原来 的 静态 方法 的 一 个 包装 : 


Gadget.prototype.isShiny = Gadget.isShiny; 
iphone.isShiny(); // "you bet" 


在 这 种 情况 下 ， 你 需要 很 小 心地 处 理 静 态 方 法 内 的 this 。 当 你 运行 Gadget.isshiny() 时 ， 
在 isShiny() 内 部 的 this 指向 Gadget 构造 函数 。 而 如 果 你 运行 iphone.isShiny() ? AR 
A this 会 指向 iphone ° 


最 后 一 个 例子 展示 了 同一 个 方法 被 普 态 调用 和 非 静 态 调 用 时 明显 不 同 的 行为 ， 这 取决 于 调用 
的 方式 。 这 里 的 instanceof 用 于 获 方 法 是 如 何 被 调用 的 : 


// constructor 
var Gadget = function (price) { 
this.price = price; 


}; 


// a static method 
Gadget.isShiny = function () { 


// this always works 
var msg = "you bet"; 


if (this instanceof Gadget) { 
// this only works if called non-statically 
msg += ", it costs $" + this.price + '!'; 


} 


return msg; 


}; 


// a normal method added to the prototype 
Gadget.prototype.isShiny = function () { 
return Gadget.isShiny.call(this); 

J; 


测试 一 下 静态 方法 调用 : 


Gadget.isShiny(); // "you bet" 


测试 一 下 实例 中 的 非 静 态 调用 : 


var a = new Gadget('499.99'); 
a.isShiny(); // "you bet, it costs $499.99!" 


私有 静态 成 员 


到 目前 为 止 ， 我 们 都 只 讨论 了 公有 的 静态 方法 ， 现 在 我 们 来 看 一 下 如 何 实现 私 有 静态 成 员 。 
所 谓 私 有 静态 成 员 是 指 : 


。 被 所 有 由 同一 构造 函数 创建 的 对 象 共享 
。 不 允许 在 构造 函数 外 部 访问 


我 们 来 看 一 个 例子 ， counter 是 Gadget 构造 函数 的 一 个 私有 静态 属性 。 在 本 章 中 我 们 已 经 讨 
论 过 私有 属性 ， 这 里 的 做 法 也 是 一 样 ， 需 要 一 个 函数 提供 的 闭 包 来 包 庄 私有 成 员 。 然 后 让 这 
个 包 衰 函数 立即 执行 并 返回 一 个 新 的 函数 。 将 这 个 返回 的 函数 赋值 给 Gadget 作为 构造 函数 。 


var Gadget = (function () { 


// static variable/property 
var counter = 0; 


// returning the new implementation 

// of the constructor 

return function () { 
console.log(counter += 1); 


}; 


}()); // execute immediately 


这 个 Gadget 构造 函数 只 简单 地 增加 私有 的 counter 的 值 然后 打 印 出 来 。 用 多 个 实例 测试 的 话 
你 会 看 到 counter 在 实例 之 间 是 共享 的 : 


var g1 = new Gadget();// logs 1 
var g2 = new Gadget();// logs 2 
var g3 = new Gadget();// logs 3 


因为 我 们 在 创建 每 个 实例 的 时 候 counter 的 值 都 会 加 1， 所 以 它 实际 上 成 了 唯一 标识 使 

用 Gadget 构造 函数 创建 的 对 象 的 ID。 这 个 唯一 标识 可 能 会 很 有 用 ， 那 为 什么 不 把 它 通用 一 个 
特权 方法 暴露 出 去 呢 ? GEE: 其 实 这 里 不 能 叫 ID， 只 是 一 个 记录 有 多 少 个 实例 的 数字 而 
已 ， 因 为 如 果 有 多 个 实例 被 创建 的 话 ， 其 实 已 经 没 办 法 取 到 前 面 实例 的 标识 了 。) 下 面 的 例 
子 是 基于 前 面 的 例子 ， 增 加 了 用 于 访问 私有 静态 属性 的 getLastId() 方法 : 


// constructor 
var Gadget = (function () { 


// static variable/property 
var counter = 0, 
NewGadget; 


// this will become the 
// new constructor implementation 
NewGadget = function () { 

counter += 1; 


}; 


// a privileged method 

NewGadget.prototype.getLastId = function () { 
return counter; 

}; 


// overwrite the constructor 
return NewGadget; 


3()); // execute immediately 


测试 这 个 新 的 实现 : 


var iphone = new Gadget(); 
iphone.getLastId(); // 1 
var ipod = new Gadget(); 
ipod.getLastId(); // 2 
var ipad = new Gadget(); 
ipad.getLastId(); // 3 


态 属性 (包括 私有 和 公有 ) 有 时 候 会 非常 方便 ， 它 们 可 以 包含 和 具体 实例 无 关 的 方法 和 数 
i ， 而 不 用 在 每 次 实例 中 再 创建 一 次 。 当 我 们 在 第 七 章 中 讨论 单 例 模式 时 ， 你 可 以 看 到 使 用 
静态 属性 实现 类 式 单 例 构造 函数 的 例子 


2 2 
x BS 
JavaScript 中 是 没有 常量 的 ， 尽 管 在 一 些 比较 现代 的 环境 中 可 能 会 提供 const 来 创建 常量 。 


一 种 常用 的 解决 办 法 是 通过 命名 规范 ， 让 不 应 该 变化 的 变量 使 用 全 大 写 。 这 个 规范 实际 上 也 
用 在 JavaScript 原 生 对 象 中 : 


Math.PI; // 3.141592653589793 
Math.SQRT2; // 1.4142135623730951 
Number .MAX_VALUE; // 1.7976931348623157e+308 


你 自己 的 常量 也 可 以 用 这 种 规范 ， 然 后 将 它们 作为 静态 属性 加 到 构造 函数 中 : 


// constructor 
var Widget = function () { 
// implementation... 


}; 


// constants 
Widget .MAX_HEIGHT = 320; 
Widget .MAX_WIDTH = 480; 


同样 的 规范 也 适用 于 使 用 字面 量 创 建 的 对 象 ， 常 量 会 是 使 用 大 写 名 字 的 普通 名 字 。 
如 果 你 真 的 希望 有 一 个 不 能 被 改变 的 值 ， 那 么 可 以 创建 一 个 私有 属性 ， 然 后 


提供 一 个 取 值 的 


， 但 不 给 赋值 的 方法 (setter) 。 这 种 方法 在 很 多 可 以 用 命名 规范 解决 的 情况 
能 有 些 矫 枉 过 正 ， 但 不 失 为 一 种 选择 。 


下 面 是 一 个 通过 的 constant 对 外 的 实现 ， 它 提供 了 这 些 方法 : 


e set(name, value) 
定义 一 个 新 的 常量 

e isDefined(name) 
检查 一 个 常量 是 否 存在 

e get(name) 
取 常 量 的 值 


在 这 个 实现 中 ， 只 允许 基本 类 


型 的 值 成 为 常量 。 同 时 还 要 使 用 hasownproperty() 小 心地 处 理 


那些 恰好 是 原 生 属 性 的 常量 名 ， 比 如 toString 或 者 hasOwnProperty ， 然后 给 所 有 的 常 量 名 加 


上 一 个 随机 生成 的 前 组 : 


var constant = (function () { 
var constants = {}, 
ownProp = Object.prototype.hasOwnProperty, 
allowed = { 
string: 1, 
number: 1, 
boolean: 1 
}, 
prefix = (Math.random() + "_").slice(2); 
return { 
set: function (name, value) { 
if (this.isDefined(name)) { 
return false; 


if (!ownProp.call(allowed, typeof value)) { 
return false; 


constants[prefix + name] = value; 

return true; 
}, 
isDefined: function (name) { 

return ownProp.call(constants, prefix + name); 
}, 
get: function (name) { 

if (this.isDefined(name)) { 

return constants[prefix + name]; 
} 


return null; 


Ww 


测试 这 个 实现 : 
// check if defined 
constant.isDefined("maxwidth"); // false 


// define 
constant.set("maxwidth", 480); // true 


// check again 
constant.isDefined("maxwidth"); // true 


// attempt to redefine 
constant.set("maxwidth", 320); // false 


// is the value still intact? 
constant.get("maxwidth"); // 480 


链 式 调用 模式 


使 用 链 式 调用 模式 可 以 让 你 在 一 对 个 象 上 连续 调用 多 个 方法 ， 不 需要 将 前 一 个 方法 的 返回 值 
赋 给 变量 ， 也 不 需要 将 多 个 方法 调用 分 散在 多 行 : 


myobj .method1("hello").method2().method3("world") .method4(); 


当 你 创建 了 一 个 没有 有 意义 的 返回 值 的 方法 时 ， 你 可 以 让 它 返回 this， 也 就 是 这 些 方法 所 属 的 
对 象 。 这 使 得 对 象 的 使 用 者 可 以 将 下 一 个 方法 的 调用 和 前 一 次 调用 链 起 来 : 


var obj = { 

value: 1, 

increment: function () { 
this.value += 1; 
return this; 

}, 

add: function (v) { 
this.value += v; 
return this; 


F 

shout: function () { 
alert(this.value); 

} 


}; 


// chain method calls 
obj.increment().add(3).shout(); // 5 


// as opposed to calling them one by one 
obj.increment(); 

obj.add(3); 

obj.shout(); // 5 


链 式 调用 模式 的 利 商 


使 用 链 式 调用 模式 的 一 个 好 处 就 是 可 以 节省 代码 量 ， 使 得 代码 更 加 简洁 和 易 读 ， 读 起 来 就 像 
在 读 句 子 一 样 。 


另外 一 个 好 处 就 是 帮助 你 思考 如 何 拆 分 你 的 函数 ， 创 建 更 小 、 更 有 针对 性 的 函数 ， 而 不 是 一 
个 什么 都 做 的 函数 。 长 时 间 来 看 ， 这 会 提升 代码 的 可 维护 性 。 


一 个 弊端 是 调用 这 样 写 的 代码 会 更 困难 。 你 可 能 知道 一 个 错误 出 现在 某 一 行 ， 但 这 一 行 要 做 

很 多 的 事情 。 当 链 式 调 用 的 方法 中 的 某 一 个 出 现 问题 而 又 没 报错 时 ， 你 无 法 知晓 到 底 是 哪 一 

个 出 问题 了 。 《代码 整 洁 之 道 》 的 作者 Robert Martion 甚 至 叫 这 种 模式 为 *train wreck” 模 式 。 
(译注 : 直译 为 “火车 事故 "， 指 负面 影响 比较 大 。) 


不 管 怎 样 ， 认 识 这 种 模式 总 是 好 的 ， 当 你 写 的 方法 没有 明显 的 有 意义 的 返回 值 时 ， 你 就 可 以 
返回 this 。 这 个 模式 应 用 得 很 广泛 ， 比 如 jQuery 库 。 如 果 你 去 看 DOM 的 API 的 话 ， 你 会 发 现 
它 也 会 以 这 样 的 形式 倾向 于 链 式 调 用 : 


document .getElementsByTagName( 'head') [0] .appendChild(newnode) ; 


method() 7 7% 


JavaScript 对 于 习惯 于 用 类 来 思考 的 人 来 说 可 能 会 比较 费解 ， 这 也 是 很 多 开发 者 希望 将 
JavaScript 代 码 变 得 更 像 基于 类 的 语言 的 原因 。 其 中 的 一 种 尝试 就 是 由 Douglas Crockford 提 
出 来 的 method() 方法 。 其 实 ， 他 也 承认 将 JavaScript 变 得 像 基 于 类 的 语言 是 不 推荐 的 方法 ， 
但 不 管 怎样 ， 这 都 是 一 种 有 意思 的 模式 ， 你 可 能 会 在 一 些 应 用 中 见 到 。 


使 用 构造 函数 主 须 Java 中 使 用 类 一 样 。 它 也 允许 你 在 构造 函数 体 的 this 中 添加 实例 属性 。 但 
是 在 this 中 添加 方法 却 是 不 高 效 的 ， 因 为 最 终 这 些 方法 会 在 每 个 实例 中 被 重新 创建 一 次 ， 这 
样 会 花费 更 多 的 内 存 。 这 也 是 为 什么 可 重用 的 方法 应 该 被 放 到 构造 函数 的 prototype 属性 
(原型 ) 中 的 原因 。 但 对 很 多 开发 者 来 说 ， prototype 可 能 跟 个 外 星人 一 样 陌 生 ， 所 以 你 可 
以 通过 一 个 方法 将 它 隐藏 起 来 。 


给 语言 添加 一 个 使 用 起 来 更 方便 的 方法 一 般 叫 作 * 语 法 糖 "。 在 这 个 例子 中 ， 你 可 以 
将 method() 方法 称 为 一 个 语法 糖 方 法 。 


使 用 这 个 语法 糖 方法 method) 来 定义 一 个 “类 ?是 像 这样 : 


var Person = function (name) { 
this.name = name; 
}. 


method('getName', function () { 
return this.name; 

}). 

method('setName', function (name) { 
this.name = name; 
return this; 


J); 
注意 构造 函数 和 调用 method() 是 如 何 链 起 来 的 ， 接 下 来 又 链 式 调用 了 下 一 个 method() 方 
法 。 这 就 是 我 们 前 面 讨论 的 链 式 调用 模式 ， 可 以 帮助 我 们 用 一 个 语句 完成 对 整个 “类 ”的 定义 。 
method() 方法 接受 两 个 参数 : 


e 新 方法 的 名 字 
e。 新 方法 的 实现 


然后 这 个 新 方法 被 添加 到 person“ 类 ”。 新 方法 的 实现 也 只 是 一 个 郊 数 ， 在 这 个 郊 数 里 
@ this 指向 由 person 创建 的 对 象 ， 正 如 我 们 期 望 的 那样 。 


下 面 是 使 用 person() 创建 和 使 用 新 对 象 的 代码 : 


var a = new Person('Adam'); 
a.getName(); // 'Adam' 
a.setName('Eve').getName(); // 'Eve' 


同样 地 注意 链 式 调用 ， 因 为 setName() 返回 了 this 就 可 以 链 式 调用 了 。 


最 后 是 method() 方法 的 实现 : 


if (typeof Function.prototype.method !== "function") { 
Function.prototype.method = function (name, implementation) { 
this.prototype[name] = implementation; 
return this; 


}; 


在 method() 的 实现 中 ， 我 们 首先 检查 这 个 方法 是 否 已 经 被 实现 过 ， 如 果 没 有 则 继续 ， 将 传 入 
的 参数 implementation 加 到 构造 函数 的 原型 中 。 在 这 里 this 指向 构造 函数 ， 而 我 们 要 增加 的 
功能 正在 在 这 个 构造 通 数 的 原型 上 。 


在 本 章 中 你 看 到 了 好 几 种 除了 字面 量 和 构造 函数 之 外 的 创建 对 象 的 方法 。 


你 看 到 了 使 用 命名 空间 模式 来 保持 全 局 空间 干净 和 帮助 组 织 代码 。 看 到 了 简单 而 又 有 用 的 依 
赖 声 明 模 式 。 然 后 我 们 详细 讨论 了 有 关 私 有 成 员 的 模式 ， 包 括 私 有 成 员 、 特 权 方 法 以 及 一 些 
涉及 私有 成 员 的 极端 情况 ， 还 有 使 用 对 象 字 面 量 创建 私有 成 员 以 及 将 私有 方法 暴露 为 公有 方 
法 。 所 有 这 些 模式 都 是 搭建 起 现在 流行 而 强大 的 模块 模式 的 积木 。 


然后 你 看 到 了 使 用 沙 箱 模 式 作为 长 命名 空间 的 另 一 种 选择 ， 它 可 以 为 你 的 代码 和 模块 提供 独 
立 的 环境 © 


在 最 后 ， 我 们 深入 讨论 了 对 象 常量 、 静 态 成 员 (公有 和 私有 ) 、 链 式 调用 模式 ， 以 及 神奇 
的 method() 方法 。 


代码 复 用 模式 


代码 复 用 是 一 个 既 重 要 又 有 趣 的 话题 ， 因 为 努力 在 自己 或 者 别人 写 的 代码 上 写 尽量 少 且 可 以 
复 用 的 代码 是 件 很 自然 的 事情 ， 尤 其 当 这 些 代码 是 经 过 测试 的 、 可 维护 的 、 可 扩展 的 、 有 文 
档 的 时 候 。 


当 我 们 说 到 代码 复 用 的 时 候 ， 想 到 的 第 一 件 事 就 是 继承 ， 本 章 会 有 很 大 篇 幅 讲 述 这 个 话题 。 
你 将 看 到 好 多 种 方法 来 实现 “类 式 (classical) "和 一 些 其 它 方式 的 继承 。 但 是 ， 最 最 重要 的 事 
情 ， 是 你 需要 记 住 终极 目标 代码 复 用 。 继 承 是 达到 这 个 目标 的 一 种 方法 ， 但 是 不 是 唯一 
的 。 在 本 章 ， 你 将 看 到 怎样 基于 其 它 对 象 来 构建 新 对 象 ， 怎 样 使 用 混 元 ， 以 及 怎样 在 不 使 用 
继承 的 情况 下 只 复 用 你 需要 的 功能 。 





在 做 代码 复 用 的 工作 的 时 候 ， 说 记 Gang of Four 在 书 中 给 出 的 关于 对 象 创建 的 建议 : “优先 使 
用 对 象 创建 而 不 是 类 继承 "。 (译注 : 《设计 模式 : 可 复 用 面向 对 象 软件 的 基础 》 (Design 
Patterns: Elements of Reusable Object-Oriented Software) 是 一 本 设计 模式 的 经 典 书籍 ， 该 
书 作者 为 Erich Gamma ` Richard Helm ` Ralph Johnson 和 John Vlissides， 被 称 为 “Gang of 
Four” ， 简 称 "GoF”。 ) 


类 式 继 承 vs 现代 继承 模式 


在 讨论 JavaScript 的 继承 这 个 话题 的 时 候 ， 经 常会 听 到 "类 式 继承 "的 概念 ， 那 我 们 先 看 一 下 什 
么 是 类 式 (classical) 继承 。classical 一 词 并 不 是 来 自 某 些 古老 的 、 固 定 的 或 者 是 被 广泛 接受 
的 解决 方案 ， 而 仅仅 是 来 自 单词 “class”。 (译注 : classical 也 有 “经典 ”的 意思 。) 


很 多 编程 语言 都 有 原生 的 类 的 概念 ， 作 为 对 象 的 蓝本 。 在 这 些 语言 中 ， 每 个 对 象 都 是 一 个 指 

定 类 的 实例 (instance) ， 并 且 (以 Java 为 例 ) 一 个 对 象 不 能 在 不 存在 对 应 的 类 的 情况 下 存 

在 。 在 JavaScript 中 ， 因 为 没有 类 ， 所 以 类 的 实例 的 概念 没什么 意义 。JavaScript 的 对 象 仅仅 
是 简单 的 键 值 对 ， 这 些 键 值 对 都 可 以 动态 创建 或 者 是 改变 。 


但 是 JavaScript 拥 有 构造 函数 (constructor functions) ， 并 且 有 语法 和 使 用 类 非常 相似 的 new 
运算 符 。 


在 Java 中 你 可 能 会 这 样 写 : 
Person adam = new Person(); 
在 JavaScript 中 你 可 以 这 样 : 


var adam = new Person(); 


除了 Java 是 强 类 型 语言 需要 给 adam 添 加 类 型 Person 外 ， 其 它 的 语法 看 起 来 是 一 样 的 。 
JavaScript 的 创建 函数 调用 看 起 来 感觉 Person 是 一 个 类 ， 但 事实 上 ，Person 仅 仅 是 一 个 函 

数 。 语 法 上 的 相似 使 得 非常 多 的 开发 者 陷入 对 JavaScript 类 的 思考 ， 并 且 给 出 了 很 多 模拟 类 的 
继承 方案 。 这 样 的 实现 方式 ， 我 们 叫 它 “ 类 式 继承 "。 顺 便 也 提 一 下 ， 所 谓 " 现 代 " 继 承 模 式 是 指 
那些 不 需要 你 去 想 类 这 个 概念 的 模式 。 


当 需 要 给 项 目 选择 一 个 继承 模式 时 ， 有 不 少 的 备 选 方案 。 你 应 该 尽量 选择 那些 现代 继承 模 
式 ， 除 非 团队 已 经 觉得 “无 类 不 欢 ”。 


本 章 先 讨论 类 式 继 承 ， 然 后 再 关注 现代 继承 模式 。 


类 式 继 承 的 期 望 结果 


实现 类 式 继承 的 目标 是 基于 构造 函数 Child() 来 创建 一 个 对 象 ， 然 后 从 另 一 个 构造 函数 Parent() 
获得 属性 。 


尽管 我 们 是 在 讨论 类 式 继承 ， 但 还 是 尽量 避免 使 用 "类 "这 个 词 。" 构 造 函 数 "或 
者 "constructor 虽然 更 长 ， 但 是 更 准确 ， 不 会 让 人 迷惑 。 通 常情 况 下 ， 应 该 努力 避免 在 跟 
团队 沟通 的 时 候 使 用 "类 "这 个 词 ， 因 为 在 JavaScript 中 ， 很 可 能 每 个 人 都 会 有 不 同 的 理 


名 再 


解 。 
下 面 是 定义 两 个 构造 函数 Parent() 和 Child() 的 例子 : 


//parent# č BA 

function Parent(name) { 
this.name = name || 'Adam'; 

} 


// 给 原型 增加 方法 

Parent.prototype.say = function () { 
return this.name; 

}; 


// È * child % BA 
function Child(name) {} 


// 继 承 
inherit(Child, Parent); 


上 面 的 代码 定义 了 两 个 构造 函数 Parent() 和 Child()，say() 方 法 被 添加 到 了 Parent() 构 建 函 数 的 
原型 (prototype) 中 ，inherit() 函 数 完成 了 继承 的 工作 。inherit() 函 数 并 不 是 原生 提供 的 ， 需 
要 自己 实现 。 让 我 们 来 看 一 看 比较 大 众 的 实现 它 的 几 种 方法 。 





类 式 继承 1 默认 模式 


最 常用 的 一 种 模式 是 使 用 Parent() 构 造 函 数 来 创建 一 个 对 象 ， 然 后 把 这 个 对 象 设 为 Child() 的 原 
型 。 这 是 可 复 用 的 inherit() 函 数 的 第 一 种 实现 方法 : 


function inherit(C, P) { 
C.prototype = new P(); 
} 


需要 强调 的 是 原型 (prototype 属 性 ) 应 该 指向 一 个 对 象 ， 而 不 是 函数 ， 所 以 它 需 要 指向 由 父 
构造 函数 创建 的 实例 (对象) ， 而 不 是 构造 函数 自己 。 换 句 话说 ， 请 注意 new 运 算 符 ， 有 了 它 
这 种 模式 才 可 以 正常 工作 。 


之 后 在 应 用 中 使 用 new Child() 创 建 对 象 的 时 候 ， 它 将 通过 原型 拥有 Parent() 实 例 的 功能 ， 像 下 
面 的 例子 一 样 : 


var kid = new Child(); 
kid.say(); // "Adam" 


跟踪 原型 链 


在 这 种 模式 中 ， 子 对 象 既 继承 了 【〈 父 对 象 ) “自己 的 属性 "添加 给 this 的 实例 属性 ， 比 如 
name) ， 也 继承 了 原型 中 的 属性 和 方法 (比如 say()) ° 


我 们 来 看 一 下 在 这 种 继承 模式 中 原型 链 是 怎么 工作 的 。 为 了 讨论 方便 ， 我 们 假设 对 aug 
中 的 一 块 空间 ， 它 包含 数据 和 指向 其 它 空间 的 引用 。 当 使 用 new Parent() 创 建 一 个 对 象 时 ， 
样 的 一 块 空间 就 被 分 配 了 (图 6-1 中 的 2 号 ) 。 它 保存 着 name 属 性 的 数据 。 如 果 你 尝试 访 a 
say() 方 法 (比如 通过 (new Parent).say()) ，2 号 空间 中 并 没有 这 个 方法 。 但 是 在 通过 隐藏 的 
链接 proto 指 向 Parent() 构 建 函 数 的 原型 prototype 属 性 时 ， 就 可 以 访问 到 包含 say() 方 法 的 1 号 
空间 (Parent.prototype) 了 。 所 有 的 这 一 块 都 是 在 幕后 发 生 的 ， 不 需要 任何 额外 的 操作 ， 但 
是 知道 它 是 怎样 工作 的 以 及 你 正在 访问 或 者 修正 的 数据 在 哪 是 很 重要 的 。 注 意 ，proto 在 这 里 
只 是 为 了 解释 原型 链 ， 这 个 属性 在 语言 本 身 中 是 不 可 用 的 ， 尽 管 有 一 些 环境 提供 了 (比如 
Firefox) 。 


(1) 


”P| Parent.prototype 





new Parent() 


name = Adam 


__proto__ 





图 6-1 Parent()# 38 i ži a) JR A 4 


MLE RAN RA — F HEAR Alinherit() BAe Mk A var kid = new Child() 创 建 一 个 新 对 象 时 会 发 
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图 6-2 继承 后 的 原型 链 

Child() 构 造 函 数 是 空 的 ， 也 没有 属性 添加 到 Child.prototype 上 ， 这 样 ， 使 用 new Child() 创 建 出 

来 的 对 象 都 是 空 的 ， 除 了 有 隐藏 的 链接 proto。 在 这 个 例子 中 ，proto 指 向 在 inherit() 喜 数 中 创 

建 的 new Parent() 对 象 。 

现在 使 用 kid.say() 时 会 发 生 什 么 ?3 号 对 象 没有 这 个 方法 ， 所 以 通过 原型 链 找到 2 号 。2 号 对 象 
也 没有 这 个 方法 ， 所 以 也 通过 原型 链 找到 1 号 ， 刚 好 有 这 个 方法 。 接 下 来 say() 方 法 引用 了 

this.name ， 这 个 变量 也 需要 解析 。 于 是 沿 原型 链 查 找 的 过 程 又 走 了 一 遍 。 在 这 个 例子 中 ，this 

指向 3 号 对 象 ， 它 没有 name 属 性 。 然 后 2 号 对 象 被 访问 ， 并 且 有 name 属 性 ， 值 为 “Adam”。 


最 后 ， 我 们 多 看 一 点 东西 ， 假 如 我 们 有 如 下 的 代码 : 


var kid = new Child(); 
kid.name = "Patrick"; 
kid.say(); // "Patrick" 


图 6-3 展 现 了 这 个 例子 的 原型 链 : 


:P| Parent.prototype 





jg] new Parent() 


name = Adam 





__ proto __ 


(3) 


new Child() 






name = Patrick 





图 6-3 继承 并 且 给 子 对 象 添加 属性 后 的 原型 链 


设 定 kid.name 并 没有 改变 2 号 对 象 的 name 属 性 ， 但 是 它 直接 在 3 号 对 象 上 添加 了 自己 的 name 
属性 。 当 kid.say() 执 行 时 ，say 方 法 在 3 号 对 象 中 找 ， 然 后 是 2 号 ， 最 后 到 1 号 ， 像 前 面 说 的 一 
样 。 但 是 这 一 次 在 找 this.name (和 kid.name 一 样 ) 时 很 快 ， 因 为 这 个 属性 在 3 号 对 象 中 就 被 
找到 了 。 


如 果 通 过 delete kid.name 的 方式 移 除 新 添加 的 属性 ， 那 么 2 号 对 象 的 name 属 性 将 暴露 出 来 并 
且 在 查找 的 时 候 被 找到 。 


这 种 模式 的 缺点 

这 种 模式 的 一 个 缺点 是 既 继承 了 ( 父 对 象 ) “自己 的 属性 "， 也 继承 了 原型 中 的 属性 。 大 部 分 情 

况 下 你 可 能 并 不 需要 “自己 的 属性 "， 因 为 它们 更 可 能 是 为 实例 对 象 添加 的 ， 并 不 用 于 复 用 。 
一 个 在 构造 函数 上 常用 的 规则 是 ， 用 于 复 用 的 成 员 (译注 : 属性 和 方法 ) 应 该 被 添加 到 
原型 上 。 

在 使 用 这 个 inherit() 函 数 时 另外 一 个 不 便 是 它 不 能 够 让 你 传 参数 给 子 构造 函数 ， 这 些 参 数 有 可 

能 是 想 再 传 给 父 构造 函数 的 。 考 虑 下 面 的 例子 : 


var s = new Child('Seth'); 
s.say(); // "Adam" 


这 并 不 是 我 们 期 望 的 结果 。 事 实 上 传递 参数 给 父 构造 函数 是 可 能 的 ， 但 这 样 需要 在 每 次 需要 
一 个 子 对 象 时 再 做 一 次 继承 ， 很 不 方便 ， 因 为 需要 不 断 地 创建 父 对 象 。 


类 式 继承 2 一 一 借用 构造 函数 


下 面 这 种 模式 解决 了 从 子 对 象 传递 参数 到 父 对 象 的 问题 。 它 借用 了 父 对 象 的 构造 函数 ， 将 子 
对 象 绑 定 到 this， 同 时 传 入 参数 : 





function Child(a, c, b, d) { 
Parent.apply(this, arguments); 
} 


使 用 这 种 模式 时 ， 只 能 继承 在 父 对 象 的 构造 吕 数 中 添加 到 this 的 属性 ， 不 能 继承 原型 上 的 成 


io 


使 用 借用 构造 函数 的 模式 ， 子 对 象 通过 复制 的 方式 继承 父 对 象 的 成 员 ， 而 不 是 像 类 式 继承 1 中 
那样 获得 引用 。 下 面 的 例子 展示 了 这 两 者 的 不 同 : 


// 父 构造 函数 
function Article() { 

this.tags = ['js', ‘'css']; 
} 
var article = new Article(); 
//BlogPost 通 过 类 式 继承 1 (默认 模式 ) 从 article 继 承 
function BlogPost() {} 
BlogPost.prototype = article; 
var blog = new BlogPost(); 
// 注 意 你 不 需要 使 用 "new Article()> ， 因 为 已 经 有 一 个 实例 了 
//StaticPage 通 过 借用 构造 函数 的 方式 从 Article 继 承 
function StaticPage() { 

Article.call(this); 
} 


var page = new StaticPage(); 
alert(article.hasOwnProperty('tags')); // true 


alert(blog.hasOwnProperty('tags')); // false 
alert(page.hasOwnProperty('tags')); // true 


在 上 面 的 代码 片段 中 ，Article() 被 两 种 方式 分 别 继承 。 默 认 模 式 使 blog 可 以 通过 原型 链 访问 到 
tags 属 性 ， 所 以 它 自己 并 没有 tags 属 性 ，hasOwnProperty() 返 回 false。page 对 象 有 自己 的 
tags 属 性 ， 因 为 它 是 使 用 借用 构造 函数 的 方式 继承 ， 复 制 〈 而 不 是 引用 ) 了 tags 属 性 。 


注意 在 修改 继承 后 的 tags 属 性 时 的 不 同 : 


blog.tags.push('html'); 
page.tags.push('php'); 
alert(article.tags.join(', ')); // "js, css, html" 


在 这 个 例子 中 ，blog 对 象 修 改 了 tags 属 性 ， 同 时 ， 它 也 修改 了 父 对 象 ， 因 为 实际 上 blog.tags 和 
article.tags 是 引 向 同一 个 数组 。 而 对 pages.tags 的 修改 并 不 影响 父 对 象 article， 因 为 
pages.tags 在 继承 的 时 候 是 一 份 独立 的 拷贝 。 


原型 链 


我 们 来 看 一 下 当 我 们 使 用 熟悉 的 Parent() 和 Child() 构 造 函 数 和 这 种 继承 模式 时 原型 链 是 什么 样 
的 。 为 了 使 用 这 种 继承 模式 ，Child() 有 明显 变化 : 


// 父 构造 函数 

function Parent(name) { 
this.name = name || 'Adam'; 

} 


// 在 原型 上 添加 方法 

Parent.prototype.say = function () { 
return this.name; 

J; 


// 子 构造 函数 

function Child(name) { 
Parent.apply(this, arguments); 

} 


var kid = new Child("Patrick"); 
kid.name; // "Patrick" 
typeof kid.say; // "undefined" 


如 果 看 一 下 图 6-4， 就 能 发 现 new Child 对 象 和 Parent 之 间 不 再 有 链接 。 这 是 因为 
Child.prototype 根 本 就 没有 被 使 用 ， 它 指向 一 个 空 对 象 。 使 用 这 种 模式 ，kid 拥 有 了 自己 的 
name 属 性 ， 但 是 并 没有 继承 say() 方 法 ， 如 果 尝 试 调用 它 的 话 会 出 错 。 这 种 继承 方式 只 是 一 种 
一 次 性 地 将 父 对 象 的 属性 复制 为 子 对 象 的 属性 ， 并 没有 proto 链 接 。 


(1) 


Parent.prototype 


pa Ga 





new Parent("Adam") 


name = Adam 


_ proto _ 





possesses > 


(4) 
Child.prototype 





(3) 


new Parent("Patrick") 


name = Patrick 


图 6-4 使 用 借用 构造 函数 模式 时 没有 被 关联 的 原型 链 






利用 借用 构造 函数 模式 实现 多 继承 
用 


使 用 借用 构造 函数 模式 ， 可 以 通过 借用 多 个 构造 函数 的 方式 来 实现 多 继承 : 


function Cat() { 
this.legs = 4; 
this.say = function () { 
return "meaowww"; 
} 


} 


function Bird() { 
this.wings = 2; 
this.fly = true; 
} 


function CatWings() { 
Cat.apply(this); 
Bird.apply(this); 
} 


var jane = new CatWings(); 
console.dir(jane); 


结果 如 图 6-5， 任 何 重 复 的 属性 都 会 以 最 后 的 一 个 值 为 准 。 


fly true 

legs 4 

wings 2 

say function) 


图 6-5 在 Firebug 中 查看 CatWings 对 象 


借用 构造 函数 的 利 与 茵 
这 种 模式 的 一 个 明显 的 兽 端 就 是 无 法 继承 原型 。 如 前 面 所 说 ， 原 型 往往 是 添加 可 复 用 的 方法 
和 属性 的 地 方 ， 这 样 就 不 用 在 每 个 实例 中 再 创建 一 遍 。 


这 种 模式 的 一 个 好 处 是 获得 了 父 对 象 自己 成 员 的 拷贝 ， 不 存在 子 对 象 意外 改写 父 对 象 属性 的 
风险 。 


那么 ， 在 上 一 个 例子 中 ， 怎 样 使 一 个 子 对 象 也 能 够 继承 原型 属性 呢 ? 怎样 能 使 kid 可 以 访问 到 
say() 方 法 呢 ? 下 一 种 继承 模式 解决 了 这 个 问题 。 


类 亏 继 承 3 一 借用 并 设置 原型 


eV Em APRA > BAAR EH BH RESHMA RMR BAR EM 
新 实例 : 





function Child(a, c, b, d) { 
Parent.apply(this, arguments); 


Child.prototype = new Parent(); 


这 样 做 的 好 处 是 子 对 象 获 得 了 父 对 象 自己 的 成 员 ， 也 获得 了 父 对 象 中 可 复 用 的 《在 原型 中 实 
现 的 ) 方法 。 子 对 象 也 可 以 传递 任何 参数 给 父 构造 函数 。 这 种 行为 可 能 是 最 接近 Java 的 ， 子 
对 象 继承 了 父 对 象 的 所 有 东西 ， 同 时 可 以 安全 地 修改 自己 的 属性 而 不 用 担心 修改 到 父 对 象 。 


一 个 吏 端 是 父 构造 函数 被 调用 了 两 次 ， 所 以 不 是 很 高 效 。 最 后 ， (RHR) 自己 的 属性 (上 比 
如 这 个 例子 中 的 name ) 也 被 继承 了 两 次 。 


我 们 来 看 一 下 代码 并 做 一 些 测试 : 


// 父 构造 函数 

function Parent(name) { 
this.name = name || 'Adam'; 

} 


// 在 原型 上 添加 方法 

Parent.prototype.say = function () { 
return this.name; 

}; 


// 子 构造 函数 
function Child(name) { 
Parent.apply(this, arguments); 


Child.prototype = new Parent(); 
var kid = new Child("Patrick"); 
kid.name; // "Patrick" 
kid.say(); // "Patrick" 


delete kid.name; 
kid.say(); // "Adam" 


跟前 一 种 模式 不 一 样 ， 现 在 say() 方 法 被 正确 地 继承 了 。 可 以 看 到 name 也 被 继承 了 两 次 ， 在 删 
除 掉 自 己 的 捞 贝 后 ， 在 原型 链 上 的 另 一 个 就 被 暴露 出 来 了 。 


图 6-6 展 示 了 这 些 对 象 之 间 的 关系 。 这 些 关 系 有 点 像 图 6-3 中 展示 的 ， 但 是 获得 这 种 关系 的 方法 
是 不 一 样 的 。 


cv P| Parent.prototype 





图 6-6 除了 继承 "自己 的 属性 ?外 ， 原 型 链 也 被 保留 了 


类 式 继 承 4 一 一 共享 原型 


不 像 前 一 种 类 式 继承 模式 需要 调用 两 次 父 构 造 函 数 ， 下 面 这 种 模式 根本 不 会 涉及 到 调用 父 构 
造 函 数 的 问题 。 





一 般 的 经 验 是 将 可 复 用 的 成 员 放 入 原型 中 而 不 是 this。 从 继承 的 角度 来 看 ， 则 是 任何 应 该 被 继 
承 的 成 员 都 应 该 放 入 原型 中 。 这 样 你 只 需要 设 定子 对 象 的 原型 和 父 对 象 的 原型 一 样 即 可 : 


function inherit(C, P) { 
C.prototype = P.prototype; 
} 


这 种 模式 的 原型 链 很 短 并 且 查 找 很 快 ， 因 为 所 有 的 对 痕 实 际 上 共享 着 同一 个 原型 。 但 是 这 样 
也 有 次 端 ， 那 就 是 如 果子 对 象 或 者 在 继承 关系 中 的 某 个 地 方 的 任何 一 个 子 对 象 修改 这 个 原 
型 ， 将 影响 所 有 的 继承 关系 中 的 父 对 象 。 GE: 这 里 应 该 是 指 会 影响 到 所 有 从 这 个 原型 中 
继承 的 对 象 。) 


如 图 6-7， 子 对 象 和 父 对 象 共 享 同一 个 原型 ， 都 可 以 访问 Say() 方 法 。 但 是 ， 子 对 象 不 继承 
name 属 性 。 


(1) 










new Child() 





__ proto __ 


图 6-7 〈 父 子 对 象 ) 共享 原型 时 的 关系 





类 式 继承 5 临时 构造 函数 


下 一 种 模 et 象 和 子 对 象 原型 的 直接 链接 解决 了 共享 原型 时 的 问题 ， 同 时 还 从 原 


下 面 是 这 种 模式 的 一 种 实现 方式 ，F() 函 数 是 一 个 空 函 数 ， 它 充当 了 子 对 象 和 父 对 象 的 代理 。 
F() 的 prototype 属 性 指向 父 对 象 的 原型 。 子 对 象 的 原型 是 一 这 个 空 函 数 的 一 个 实例 : 


function inherit(C, P) { 
var F = function () {}; 
F.prototype = P.prototype, 
C.prototype = new F(); 

} 


这 种 模式 有 一 种 和 默认 模式 (类 式 继承 1) 明显 不 一 样 的 行为 ， 因 为 在 这 里 子 对 象 只 继承 原型 
中 的 属性 (图 6-8) 。 


(1) 


new Parent() | | 图 










__ proto _ 





new Child() 





图 6-8 使 用 临时 (代理 ) 构造 函数 F() 实 现 类 式 继承 


这 种 模式 通常 情况 下 都 是 一 种 很 棒 的 选择 ， 因 为 原型 本 来 就 是 存放 复 用 成 员 的 地 方 。 在 这 
模式 中 ， Ra lthis 中 的 任何 成 员 都 不 会 被 继承 。 


我 们 来 创建 一 个 子 对 象 并 且 检查 一 下 它 的 行为 : 


var kid = new Child(); 


如 果 你 访问 kid.name 将 得 到 undefined。 在 这 个 例子 中 ，name 是 父 对 象 自己 的 属性 ， 而 在 继 

承 的 过 程 中 我 们 并 没有 调用 new Parent()， 所 以 这 个 属性 并 没有 被 创建 。 当 访问 kid.say() 时 ， 

它 在 3 号 对 象 中 不 可 用 ， 所 以 在 原型 链 中 查找 ，4 号 对 象 也 没有 ， 但 是 1 号 对 象 有 ， 它 在 内 在 中 
的 位 置 会 被 所 有 从 Parent() 创 建 的 构造 函数 和 子 对 象 所 共享 。 


存储 父 类 (Superclass ) 


在 上 一 种 模式 的 基础 上 ， 还 可 以 添加 一 个 指向 原始 父 对 象 的 引用 。 这 很 像 其 它 语言 中 访问 超 
类 (superclass) 的 情况 ， 有 时 候 很 方便 。 


我 们 将 这 个 属性 命名 为 “Uber”"， 因 为 “super” 是 一 个 保留 字 ， 而 “superclass” 则 可 能 误导 别人 认 
为 JavaScript 拥 有 类 。 下 面 是 这 种 类 式 继承 模式 的 一 个 改进 版 实现 : 


function inherit(c, P) { 
var F = function () {}; 
F.prototype = P.prototype,; 
C.prototype = new F(); 
C.uber = P.prototype; 

} 


重 置 构造 函数 引用 


这 个 近乎 完美 的 模式 上 还 需要 做 的 最 后 一 件 事 情 就 是 重 置 构造 函 数 (constructor) 的 指向 ， 
以 便 未 来 在 某 个 时 刻 能 被 正确 地 使 用 。 


如 果 不 重 置 构造 函数 的 指向 ， 那 所 有 的 子 对 象 都 会 认为 Parent() 是 它们 的 构造 函数 ， 而 这 个 结 
果 完 全 没有 用 。 使 用 前 面 的 inherit() 的 实现 ， 你 可 以 观察 到 这 种 行为 : 


// parent, child, inheritance 
function Parent() {} 

function Child() {} 
inherit(Child, Parent); 


// testing the waters 

var kid = new Child(); 
kid.constructor.name; // "Parent" 
kid.constructor === Parent; // true 


constructor 属 性 很 少 用 ， 但 是 在 运行 时 检查 对 象 很 方便 。 你 可 以 重新 将 它 指 向 期 望 的 构造 函 
数 而 不 影响 功能 ， 因 为 这 个 属性 更 多 是 “信息 性 "的 。 (译注 : 即 它 更 多 的 时 候 是 在 提供 信息 而 
不 是 参与 到 函数 功能 中 。) 


最 终 ， 这 种 类 式 继承 的 Holy Grail 版 本 看 起 来 是 这 样 的 : 


function inherit(C, P) { 
var F = function () {}; 
F.prototype = P.prototype,; 
C.prototype = new F(); 
C.uber = P.prototype; 
C.prototype.constructor = C; 


类 似 这样 的 函数 也 存在 于 YUI 库 〈 也 许 还 有 其 它 库 ) 中 ， 它 将 类 式 继承 的 方法 带 给 了 没有 类 的 
语言 。 如 果 你 决定 使 用 类 式 继承 ， 那 么 这 是 最 好 的 方法 。 


“代理 函数 "或 者 "代理 构造 函数 "也 是 指 这 种 模式 ， 因 为 临时 构造 函数 是 被 用 作 获 取 父 构造 
函数 原型 的 代理 。 


一 种 常见 的 对 Holy Grail 模 式 的 优化 是 避免 每 次 需要 继承 的 时 候 都 创建 一 个 临时 (代理) 构造 
函数 。 事 实 上 创建 一 次 就 足够 了 ， 以 后 只 需要 修改 它 的 原型 即 可 。 你 可 以 用 一 个 立即 执行 的 
函数 来 将 代理 函数 存储 到 闭 包 中 : 


var inherit = (function () { 
var F = function () {}; 
return function (C, P) { 
F.prototype = P.prototype,; 
C.prototype = new F(); 
C.uber = P.prototype; 
C.prototype.constructor = C; 


} 
}()); 


Klass 


有 很 多 JavaScript 类 库 模拟 了 类 ， 创 造 了 新 的 语法 糖 。 具 体 的 实现 方式 可 能 会 不 一 样 ， 但 是 基 
本 上 都 有 一 些 共性 ， 包 括 : 


© 有 一 个 约定 好 名 字 的 方法 ， 如 initialize、_init 或 者 其 它 相 似 的 名 字 ， 会 被 自动 调用 ， 来 充 
当 类 的 构造 函数 。 

© 类 可 以 从 其 它 类 继承 

。 在 子 类 中 可 以 访问 到 父 类 (superclass ) 


我 们 在 这 里 做 一 下 变化 ， 在 本 章 的 这 部 分 自由 地 使 用 “class” 单 词 ， 因 为 主题 就 是 模拟 


Ro 


为 避免 讨论 太 多 细节 ， 我 们 来 看 一 下 JavaScript 中 一 种 模拟 类 的 实现 。 首 先 ， 这 种 解决 方案 从 
客户 的 角度 来 看 将 如 何 被 使 用 ? 


var Man = klass(null, { 
__construct: function (what) { 
console.log("Man's constructor"); 
this.name = what; 


}, 

getName: function () { 
return this.name; 

} 


3); 


这 种 语法 糖 的 形式 是 一 个 名 为 klass() 的 函数 。 在 一 些 实现 方式 中 ， 它 可 能 是 Klass() 构 造 函 数 
或 者 是 增强 的 Object.prototype， 但 是 在 这 个 例子 中 ， 我 们 让 它 只 是 一 个 简单 的 函数 。 


这 个 函数 接受 两 个 参数 : 一 个 被 继承 的 类 和 通过 对 象 字面 量 提供 的 新 类 的 实现 。 受 PHP 的 影 
响 ， 我 们 约定 类 的 构造 函数 必须 是 一 个 名 为 ”construct 的 方法 。 在 前 面 的 代码 片段 中 ， 建 立 
了 一 个 名 为 Man 的 新 类 ， 并 且 它 不 继承 任何 类 (意味 着 继承 自 Object) 。Man 类 有 一 个 在 
__Construct 建 立 的 自己 的 属性 name 和 一 个 方法 getName()。 这 个 类 是 一 个 构造 函数 ， 所 以 下 
面 的 代码 将 正常 工作 (并 且 看 起 来 像 类 实例 化 的 过 程 ) 


var first = new Man('Adam'); // logs "Man's constructor" 
first.getName(); // "Adam" 


现在 我 们 来 扩展 这 个 类 ， 创 建 一 个 SuperMan 类 : 


var SuperMan = klass(Man, { 
__construct: function (what) { 
console.log("SuperMan's constructor"); 


getName: function () { 


var name = SuperMan.uber.getName.call(this); 
return "I am " + name; 


3); 


这 里 ，klass() 的 第 一 个 参数 是 将 被 继承 的 Man 类 。 值 得 注意 的 是 ， 在 getName() 中 ， 父 类 的 
getName() 方 法 首先 通 enue ae 态 属 性 被 调用 。 我 们 来 测试 一 下 : 


var clark = new SuperMan('Clark Kent'); 
clark.getName(); // "I am Clark Kent" 


第 一 行 在 console 中 记录 了 “Man's constructor” ， 然 后 是 “Superman's constructor” ° 4 — 278 
言 中 ， 父 类 的 构造 函数 在 子 类 构造 函数 被 调用 的 时 候 会 自动 执行 ， 这 个 特性 也 可 以 模拟 。 


用 instanceof 运 算 符 测试 返回 希望 的 结果 : 


clark instanceof Man; // true 
clark instanceof SuperMan; // true 


> 我 们 来 看 一 下 klass() 函 数 是 怎样 实现 的 : 


var klass = function (Parent, props) { 
var Child, F, i; 


// 1. 
// new constructor 
Child = function () { 
if (Child.uber && Child.uber.hasOwnProperty("__construct")) { 
Child.uber.__construct.apply(this, arguments); 


if (Child.prototype.hasOwnProperty("_construct")) { 
Child.prototype.__construct.apply(this, arguments); 
} 


}; 


// 2. 
// inherit 
Parent = Parent || Object; 

= function () {}; 
F.prototype = Parent.prototype,; 
Child.prototype = new F(); 
Child.uber = Parent.prototype; 
Child.prototype.constructor = Child; 


// 3. 
// add implementation methods 
for (i in props) { 
if (props.hasOwnProperty(i)) { 
Child.prototype[i] = props[i]; 
} 


} 


// return the "class" 
return Child; 


}; 


这 个 klass() 实 现 有 三 个 明显 的 部 分 : 


创建 Child() 构 造 函 数 ， 这 也 是 最 后 返回 的 将 被 作为 类 使 用 的 函数 。 在 这 个 函数 里 面 ， 如 
oR _ construct 方 法 存在 的 话 将 被 调用 。 同 样 是 在 父 类 的 construct (如 果 存 在 ) 被 调用 
前 使 用 静态 的 uber 属 性 。 也 可 能 存在 uber 没 有 定义 的 情况 比如 从 Object 继 承 ， 因 为 它 





是 在 Man 类 中 被 定义 的 。 

2， 第 二 部 分 主要 完成 继承 。 只 是 简单 地 使 用 前 面 章 节 讨 论 过 的 Holy Grail 类 式 继承 模式 。 只 
有 一 个 东西 是 新 的 : 如 果 Parent 没 有 传 值 的 话 ， 设 定 Parent 为 Object 。 

3， 最 后 一 部 分 是 类 夏 正 定义 的 地 方 ， 循 环 需 要 实现 的 方法 (如 例子 中 的 ”constructt 和 
getName) ， 并 将 它们 添加 到 Child 的 原型 中 。 


什么 时 候 使 用 这 种 模式 ? 其 实 ， 最 好 是 能 避免 则 避免 ， 因 为 它 带 来 了 在 这 门 语言 中 不 存在 的 
完整 的 类 的 概念 ， 会 让 人 疑惑 。 使 用 它 需要 学 习 新 的 语法 和 新 的 规则 。 也 就 是 说 ， 如 果 你 或 
者 你 的 团队 对 类 感到 习惯 并 且 同 时 对 原型 感到 不 习惯 ， 这 种 模式 可 能 是 一 个 可 以 探索 的 方 
向 。 这 种 模式 允许 你 完全 忘掉 原型 ， 好 处 就 是 你 可 以 将 语法 变种 得 像 其 它 你 所 喜欢 的 语言 一 
样 。 


原型 继承 


现在 ， 让 我 们 从 一 个 叫 作 “ 原 型 继承 "的 模式 来 讨论 没有 类 的 现代 继承 模式 。 在 这 种 模式 中 ， 没 
有 任何 类 进来 ， 在 这 里 ， 一 个 对 象 继承 自 另 外 一 个 对 象 。 你 可 以 这 样 理解 它 : 你 有 一 个 想 复 
用 的 对 象 ， 然 后 你 想 创建 第 二 个 对 象 ， 并 且 获 得 第 一 个 对 象 的 功能 。 下 面 是 这 种 模式 的 用 
法 : 


// 需 要 继承 的 对 象 
var parent = { 

name: "Papa" 
3; 


// 新 对 象 
var child = object(parent); 


// 测 试 
alert(child.name); // "Papa" 


在 这 个 代码 片段 中 ， 有 一 个 已 经 存在 的 使 用 对 象 字面 量 创建 的 对 象 叫 parent ， | 建 一 个 
和 parent 有 相同 的 属性 和 方法 的 对 象 叫 child。child 对 象 使 用 object() 函 数 创 建 。 这 个 函数 在 
ae 


与 Holy Grail 类 式 继承 相似 ， 可 以 使 用 一 个 空 的 临时 构造 函数 F()， 然 后 设 定 F() 的 原型 为 parent 
对 象 。 最 后 ， 返 回 一 个 临时 构造 函数 的 新 实例 。 


function object(o) { 
function F() {} 
F.prototype = o,; 
return new F(); 


图 6-9 展 示 了 使 用 原型 继承 时 的 原型 链 。 在 这 里 child 总 是 以 一 个 空 对 象 开 始 ， 它 没有 自己 的 属 
性 但 通过 原型 链 (_ proto) 拥有 父 对 象 的 所 有 功能 。 


(1) 






ETETETT 





(2) 
child = new F() 





图 6-9 原型 继承 模式 


讨论 


在 原型 继承 模式 中 ，parent 不 需要 使 用 对 象 字 面 量 来 创建 。 (尽管 这 是 一 种 更 觉 的 方式 。) 可 
以 使 用 构造 函数 来 创建 parent。 注 意 ， 如 果 你 这 样 做 ， 那 么 自己 的 属性 和 原型 上 的 属性 都 将 被 
继承 : 


// parent constructor 
function Person() { 
// an "own" property 
this.name = "Adam"; 
} 
// a property added to the prototype 
Person.prototype.getName = function () { 
return this.name; 


}; 


// create a new person 
var papa = new Person(); 
// inherit 

var kid = object(papa); 


// test that both the own property 
// and the prototype property were inherited 
kid.getName(); // "Adam" 


在 这 种 模式 的 另 一 个 变种 中 ， 你 可 以 选择 只 继承 已 存在 的 构造 函数 的 原型 对 象 。 记 住 ， 对 象 
继承 自 对 象 ， 不 管 父 对 象 是 怎么 创建 的 。 这 是 前 面 例子 的 一 个 修改 版 本 : 


// parent constructor 
function Person() { 
// an "own" property 
this.name = "Adam"; 
} 
// a property added to the prototype 
Person.prototype.getName = function () { 


}; 


// inherit 
var kid = object(Person.prototype); 


typeof kid.getName; // "function", because it was in the prototype 
typeof kid.name; // "undefined", because only the prototype was inherited 


例外 的 ECMAScript 5 


在 ECMAScript 5 中 ， 原 型 继承 已 经 正式 成 为 语言 的 一 部 分 。 这 种 模式 使 用 Object.create 方 法 
来 实现 。 换 句 话 说， 你 不 再 需要 自己 去 写 类 似 object() 的 元 数 ， 它 是 语言 原生 的 了 : 


var child = Object.create(parent); 


Object.create() 接 收 一 个 额外 的 参数 一 ”一 个 对 象 。 这 个 额外 对 象 中 的 属性 将 被 作为 自己 的 属 
性 添加 到 返回 的 子 对 象 中 。 这 让 我 们 可 以 很 方便 地 将 继承 和 创建 子 对 象 在 一 个 方法 调用 中 实 
现 。 例 如 : 
var child = Object.create(parent, { 
age: { value: 2 } // ECMA5 descriptor 


3); 
child.hasOwnProperty("age"); // true 


你 可 能 也 会 发 现 原型 继承 模式 已 经 在 一 些 JavaScript 类 库 中 实现 了 ， 比 如 ， 在 YUI3 中 ， 它 是 
YObject() 方 法 : 


YUI().use('*', function (Y) { 
var child = Y.Object(parent); 


3); 


通过 复制 属性 继承 


让 我 们 来 看 一 下 另外 一 种 继承 模式 一 通过 复制 属性 继承 。 在 这 种 模式 中 ， 一 个 对 象 通过 简 
单 地 复制 另 一 个 对 象 来 获得 功能 。 下 面 是 一 个 简单 的 实现 这 种 功能 的 extend() 有 函数 : 





function extend(parent, child) { 
var i; 
child = child || {}; 
for (i in parent) { 
if (parent.hasOwnProperty(i)) { 
child[i] = parent[i]; 
} 


return child; 


这 是 一 个 简单 的 实现 ， 仅 仅 是 遍历 了 父 对 象 的 成 员 然 后 复制 它们 。 在 这 个 实现 中 ，child 是 可 
选 参 数 ， 如 果 它 没有 被 传 入 一 个 已 有 的 对 象 ， 那 么 一 个 全 新 的 对 象 将 被 创建 并 被 返回 
var dad {name: "Adam"}; 


var kid extend(dad); 
kid.name; // "Adam" 


面 给 出 的 实现 叫 作 对 象 的 " 浅 拷贝”(shallow copy) 。 另 一 方面 ，“ 深 拷贝 "是 指 检查 准备 复 
制 的 属性 本 身 是 否 是 对 象 或 者 数组 ， 如 果 是 ， 也 遍历 它们 的 属性 并 复制 。 如 果 使 用 浅 找 贝 的 
话 (因为 在 JavaScript 中 对 象 是 按 引 用 传递 ) ， 如 果 你 改变 子 对 象 的 一 个 属性 ， 而 这 个 属性 恰 
好 是 一 个 对 象 ， 那 么 你 也 会 改变 父 对 象 。 实 际 上 这 对 方法 来 说 可 能 很 好 (因为 函数 也 是 对 
象 ， 也 是 按 引 用 传递 ) ， 但 是 当 遇 到 其 它 的 对 象 和 数组 的 时 候 可 能 会 有 些 意外 情况 。 考 虑 这 
种 情况 : 


var dad = { 

counts: [1, 2, 3], 

reads: {paper: true} 
}; 
var kid = extend(dad); 
kid.counts.push(4); 
dad.counts.toString(); // "1,2,3,4" 
dad.reads === kid.reads; // true 
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类 型 是 否 是 对 象 ， 如 果 是 ， 则 北 归 遍历 它 的 属性 。 另 外 一 个 需要 做 的 检查 是 这 个 对 象 是 丨 的 
对 象 还 是 数组 。 我 们 可 以 使 用 第 3 章 讨 论 过 的 数组 检查 方式 。 最 终 深 拷贝 版 的 extend() 是 这 样 
ay: 


function extendDeep(parent, child) { 
var i, 
toStr = Object.prototype.toString, 
astr = "[Lobject Array]"; 


child = child || {}; 


for (i in parent) { 
if (parent.hasOwnProperty(i)) { 


if (typeof parent[i] === "object") { 
child[i] = (toStr.call(parent[i]) === astr) ? [] : {}; 
extendDeep(parent[i], child[i]); 

} else { 


child[i] = parent[i]; 
} 


return child; 
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var dad = { 
counts: [1, 2, 3], 
reads: {paper: true} 


var kid = extendDeep(dad); 


kid.counts.push(4); 
kid.counts.toString(); // "1,2,3,4" 
dad.counts.toString(); // "1,2,3" 


dad.reads === kid.reads; // false 
kid.reads.paper = false; 
kid.reads.web = true; 
dad.reads.paper; // true 


通过 复制 属性 继承 的 模式 很 简单 且 应 用 很 广泛 。 例 如 Firebug (JavaScript 写 的 Firefox 扩 展 ) 
有 一 个 方法 叫 extend() 做 浅 找 贝 ，jQuery 的 extend() 方 法 做 深 找 贝 。YUI3 提 供 了 一 个 叫 作 
Yclone() 的 方法 ， 它 创建 一 个 深 找 贝 并 且 通 过 绑 定 到 子 对 象 的 方式 复制 函数 。 (本 章 后 面 将 有 
更 多 关于 绑 定 的 内 容 。) 


这 种 模式 并 不 高 深 ， 因 为 根本 没有 原型 牵涉 进来 ， 而 只 跟 对 象 和 它们 的 属性 有 关 。 


混 元 (Mix-ins ) 


既然 谈 到 了 通过 复制 属性 来 继承 ， 就 让 我 们 顺便 多 说 一 点 ， 来 讨论 一 下 " 混 元 "模式 。 除 了 前 面 
说 的 从 一 个 对 象 复 制 ， 你 还 可 以 从 任意 多 数量 的 对 象 中 复制 属性 ， 然 后 将 它们 混在 一 起 组 成 
一 个 新 对 象 。 


实现 很 简单 ， 只 需要 遍历 传 入 的 每 个 参数 然后 复制 它们 的 每 个 属性 : 


function mix() { 
var arg, prop, child = {}; 
for (arg = 0; arg < arguments.length; arg += 1) { 
for (prop in arguments[arg]) { 
if (arguments[arg].hasOwnProperty(prop)) { 
child[prop] = arguments[arg][prop]; 
J 


} 


return child; 


现在 我 们 有 了 一 个 通用 的 混 元 函数 ， 我 们 可 以 传递 任意 数量 的 对 象 进去 ， 返 回 的 结果 将 是 一 
个 包含 所 有 传 入 对 象 属性 的 新 对 象 。 下 面 是 用 法 示例 : 


var cake = mix( 
{eggs: 2, large: true}, 
{butter: 1, salted: true}, 
{flour: "3 cups"}, 
{sugar: "sure!"} 


图 6-10 展 示 了 在 Firebug 的 控制 台中 用 console.dir(cake) 展 示 出 来 的 混 元 后 cake 对 象 的 属性 。 


butter i 

eggs 2 

flour "3 cups" 
large true 
salted true 
sugar "sure!" 


图 6-10 在 Firebug 中 查看 cake 对 象 


如 果 你 习惯 了 某 些 将 混 元 作为 原生 部 分 的 语言 ， 那 么 你 可 能 期 望 修改 一 个 或 多 个 父 对 象 
时 也 影响 子 对 象 。 但 在 这 个 实现 中 这 是 不 会 发 生 的 事情 。 这 里 我 们 只 是 简单 地 遍历 、 复 
制 自己 的 属性 ， 并 没有 与 父 对 象 的 链接 。 


借用 方法 


有 时 候 会 有 这 样 的 情况 : 你 希望 使 用 某 个 已 存在 的 对 象 的 一 两 个 方法 ， 你 希望 能 复 用 它们 ， 
但 是 又 站 的 不 希望 和 那个 对 象 产生 继承 关系 ， 因 为 你 只 希望 使 用 你 需要 的 那 一 两 个 方法 ， 而 


可 行 的 。 在 本 书 中 ， 你 其 实 已 经 见 过 这 种 模式 了 ， 基 至 在 本 章 extendDeep() 的 实现 中 也 有 用 
到 o 
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apply()。 这 两 个 方法 的 唯一 区 别 是 后 者 接受 一 个 参数 数组 以 传 入 正在 调用 的 方法 ， 而 前 者 只 
接受 一 个 一 个 的 参数 。 你 可 以 使 用 这 两 个 方法 来 从 已 有 的 对 象 中 借用 方法 : 


//call() example 

notmyobj.doStuff.call(myobj, parami, p2, p3); 

// apply() example 

notmyobj.doStuff.apply(myobj, [parami, p2, p3]); 


在 这 个 例子 中 有 一 个 对 象 myobj， 而 且 notmyobj 有 一 个 用 得 着 的 方法 叫 doStuff()。 你 可 以 简单 
地 临时 借用 doStuff() 方 法 ， 而 不 用 处 理 继承 然后 得 到 一 堆 myobj 中 你 永远 不 会 用 的 方法 。 


你 传 一 个 对 和 象 和 任意 的 参数 ， 这 个 被 借用 的 方法 会 将 this 绑 定 到 你 自己 的 对 象 上 上。 简单 地 说 ， 
你 的 对 外 会 临时 假装 成 另 一 个 对 象 以 使 用 它 的 方法 。 这 就 像 实 际 上 获得 了 继承 但 又 免除 了 "“ 继 
承 税 ”( 指 你 不 需要 的 属性 和 方法 ) 。 


例 : 从 数组 借用 


这 种 模式 的 一 种 常见 用 法 是 从 数组 借用 方法 。 


数组 有 很 多 很 有 用 但 是 一 些 “ 类 数组 ”对象 (如 arguments) 不 具备 的 方法 。 所 以 arguments 可 
以 借用 数组 的 方法 ， 比 如 slice() 。 这 是 一 个 例子 : 
function f() { 


var args = [].slice.call(arguments, 1, 3); 
return args; 
} 


// example 
f(1, 2, 3, 4, 5, 6); // returns [2,3] 


在 这 个 例子 中 ， 有 一 个 空 数 组 被 创建 了 ， 因 为 要 借用 它 的 方法 。 同 样 的 事情 也 可 以 使 用 一 种 
看 起 来 代码 更 长 的 方法 来 做 ， 那 就 是 直接 从 数组 的 原型 中 借用 方法 ， 使 用 
Array.prototype.slice.call(...)。 这 种 方法 代码 更 长 一 些 ， 但 是 不 用 创建 一 个 空 数组 。 


借用 并 绑 定 


当 借 用 方法 的 时 候 ， 不 管 是 通过 call()/apply() 还 是 通过 简单 的 赋值 ， 方 法 中 的 this 指 向 的 对 象 
都 是 基于 调用 的 表达 式 来 决定 的 。 但 是 有 时 候 最 好 的 使 用 方式 是 将 this 的 值 锁 定 或 者 提前 绑 定 
到 一 个 指定 的 对 象 上 。 


我 们 来 看 一 个 例子 。 这 是 一 个 对 象 one， 它 有 一 个 say() 方 法 : 


var one = { 
name: "object", 
say: function (greet) { 
return greet + ", " + this.name; 


} 
}; 


// test 
one.say('hi'); // "hi, object" 


现在 另 一 个 对 象 two 没 有 say() 方 法 ， 但 是 它 可 以 从 one 借 用 : 


var two = { 
name: "another object" 


J; 
one.say.apply(two, ['hello']); // "hello, another object" 


在 这 个 例子 中 ，say() 方 法 中 的 this 指 向 了 two，this.name 是 "another object” ° 142% 40 RA HH 
场景 下 你 将 th 函数 赋值 给 了 全 局 变量 或 者 是 将 这 个 函数 作为 回调 ， 会 发 生 什么 ? 在 客户 端 编程 
中 有 非常 多 的 事件 和 回调 ， 所 以 这 种 情况 经 常 发 生 : 


// assigning to a variable 

// ~this~ will point to the global object 
var say = one.Say; 

say('hoho'); // "hoho, undefined" 


// passing as a callback 
var yetanother = { 
name: "Yet another object", 
method: function (callback) { 
return callback('Hola'); 


} 
}; 


yetanother.method(one.say); // "Holla, undefined" 


在 这 两 种 情况 中 say() 中 的 this 都 指向 了 全 局 对 象 ， 所 以 代码 并 不 像 我 们 想 aU 工作 。 
BANGER (RSL? BL) 一 个 方法 的 对 象 ， 我 们 可 以 用 一 个 简单 的 函数 ， 像 这 


function bind(o, m) { 
return function () { 
return m.apply(o, [].slice.call(arguments) ); 


}; 


这 个 bind() 函 数 接受 一 个 对 象 0 和 一 个 方法 m， 然 后 把 它们 绑 定 在 一 起 ， 再 返回 另 一 个 函数 。 
返回 的 函数 通过 闭 包 可 以 访问 到 0 和 mm。 也 就 是 说 ， 即 使 在 bind() 返 回 之 后 ， 内 层 的 函数 仍然 
可 以 访问 到 o 和 m， 而 0 和 m 会 始终 指向 原始 的 对 象 和 方法 。 让 我 们 用 bind() 来 创建 一 个 新 函 
数 : 


var twosay = bind(two, one.say); 
twosay('yo'); // "yo, another object" 


正如 你 看 到 的 ， 尽 管 twosay() 是 作为 一 个 全 局 函数 被 创建 的 ， 但 this 并 没有 指向 全 局 对 象 ， 而 
是 指向 了 通过 bind() 传 入 的 对 象 two。 不 论 无 何 调 用 twosay()，this 将 始终 指向 two 。 


绑 定 是 奢侈 的 ， 你 需要 付出 的 代价 是 一 个 额外 的 闭 包 。 


Function.prototype.bind() 


ECMAScript5 在 Function.prototype 中 添加 了 一 个 方法 叫 bind()， 使 用 时 和 apply 和 call() 一 样 简 
单 。 所 以 你 可 以 这 样 写 : 


var newFunc = obj.someFunc.bind(myobj, 1, 2, 3); 


这 意味 着 将 SomeFunc() 主 myobj 绑 定 了 并 且 传 入 了 someFunc() 的 前 三 个 参数 。 这 也 是 一 个 在 
第 4 章 讨论 过 的 部 分 应 用 的 例子 。 


让 我 们 来 看 一 下 当 你 的 程序 跑 在 低 于 ES5 的 环境 中 时 如 何 实现 Function.prototype.bind() : 


if (typeof Function.prototype.bind === "undefined") { 
Function.prototype.bind = function (thisArg) { 
var fn = this, 
slice = Array.prototype.slice, 
args = slice.call(arguments, 1); 


return function () { 
return fn.apply(thisArg, args.concat(slice.call(arguments))); 


}; 


这 个 实现 可 能 看 起 来 有 点 熟悉 ， 它 使 用 了 部 分 应 用 ， 将 传 入 bind() 的 参数 串 起 来 (RTA 
参数 ) ， 然 后 在 被 调用 时 传 给 bind() 返 回 的 新 函数 。 这 是 用 法 示例 : 


var twosay2 = one.say.bind(two); 
twosay2('Bonjour'); // "Bonjour, another object" 


在 这 个 例子 中 ， 除 了 绑 定 的 对 象 外 ， 我 们 没有 传 任何 参数 给 bind()。 下 一 个 例子 中 ， 我 们 来 传 
一 个 用 于 部 分 应 用 的 参数 : 


var twosay3 = one.say.bind(two, 'Enchanté'); 
twosay3(); // "Enchanté, another object" 


在 JavaScript 中 ， 继 承 有 很 多 种 方案 可 以 选择 。 学 习 和 理解 不 同 的 模式 是 有 好 处 的 ， 因 为 这 可 
以 增强 你 对 这 门 语言 的 掌握 能 力 。 在 本 章 中 你 看 到 了 很 多 类 式 继 承 和 现代 继承 的 方案 。 

但 是 ， 也 许 在 开发 过 程 中 继承 并 不 是 你 经 常 面 对 的 一 个 问题 。 这 一 部 分 是 因为 这 个 问题 已 经 
被 使 用 某 种 方式 或 者 某 个 你 使 用 的 类 库 解决 了 ， 另 一 部 分 是 因为 你 不 需要 在 JavaScript 中 建立 
很 长 很 复杂 的 继承 链 。 在 静态 强 类 型 语言 中 ， 继 承 可 能 是 唯一 可 以 利用 代码 的 方法 ， 但 在 
JavaScript 中 你 可 能 有 更 多 更 简单 更 优化 的 方法 ， 包 括 借用 方法 、 绑 定 、 复 制 属性 、 混 元 等 。 


记 住 ， 代 码 复 用 才 是 目标 ， 继 承 只 是 达成 这 个 目标 的 一 种 手段 。 


设计 模式 


在 GoF (Gang of Four) 的 书 中 提出 的 设计 模式 为 面向 对 象 的 软件 设计 中 遇 到 的 一 些 普遍 问题 
提供 了 解决 方案 。 它 们 已 经 诞生 很 久 了 ， 而 且 被 证 实在 很 多 情况 下 是 很 有 效 的 。 这 正 是 你 需 
要 熟悉 它 的 原因 ， 也 是 我 们 要 讨论 它 的 原因 。 


尽管 这 些 设计 模式 跟 语 言 和 具体 的 实现 方式 无 关 ， 但 它们 多 年 来 被 关注 到 的 方面 仍然 主要 是 
在 强 类 型 静态 语言 比如 C++ 和 Java 中 的 应 用 。 

JavaScript 作 为 一 种 基于 原型 的 弱 类 型 动态 语言 ， 使 得 有 些 时 候 实 现 某 些 模式 时 相当 简单 ， 其 
至 不 费 吹 灰 之 力 。 


让 我 们 从 第 一 个 例子 一 一 单 例 模式 
不 同 。 





来 看 一 下 在 JavaScript 中 和 静态 的 基于 类 的 语言 有 什么 


单 例 


单 例 模式 的 核心 思想 是 让 指定 的 类 只 存在 唯一 一 个 实例 。 这 意味 着 当 你 第 二 次 使 用 相同 的 类 
去 创建 对 象 的 时 候 ， 你 得 到 的 应 该 和 第 一 次 创建 的 是 同一 个 对 象 。 


这 如 何 应 用 到 JavaScript 中 呢 ? 在 JavaScript 中 没有 类 ， 只 有 对 象 。 当 你 创建 一 个 对 象 时 ， 事 
实 上 根本 没有 另 一 个 对 象 和 它 一 样 ， 这 个 对 象 其 实 已 经 是 一 个 单 例 。 使 用 对 象 字面 量 创建 一 
个 简单 的 对 象 也 是 一 种 单 例 的 例子 : 


var obj = { 
myprop: "my value' 


1 


4e JavaScript ? ’ 对 象 永远 不 会 相等 ’ 除非 它们 是 同一 个 对 象 ` 所 以 即使 你 创建 一 个 看 起 来 完 
全 一 样 的 对 象 ， 它 也 不 会 和 前 面 的 对 象 相等 : 
var obj2 = { 
myprop: ‘my value' 


obj === obj2; // false 
obj == obj2; // false 


所 以 你 可 以 说 当 你 每 次 使 用 对 象 字面 量 创建 一 个 对 象 的 时 候 就 是 在 创建 一 个 单 例 ， 并 没有 特 
别 的 语法 迁 涉 进来 。 


需要 注意 的 是 ， 有 的 时 候 当 人 们 在 JavaScript 中 提出 “ 单 例 ”的 时 候 ， 它 们 可 能 是 在 指 第 5 
章 讨 论 过 的 “模块 模式 ”。 


使 用 new 


JavaScript 没 有 类 ， 所 以 一 字 一 名 地 说 单 例 的 定义 并 没有 什么 意义 。 但 是 JavaScript 有 使 用 
new、 通 过 构造 函数 来 创建 对 象 的 语法 ， 有 时 候 你 可 能 需要 这 种 语法 下 的 一 个 单 例 实现 。 这 也 
就 是 说 当 你 使 用 new、 通 过 同一 个 构造 函数 来 创建 多 个 对 象 的 时 候 ， 你 应 该 只 是 得 到 同一 个 对 
象 的 不 同 引用 。 


RRR A 从 一 个 实用 模式 的 角度 来 说 ， 下 面 的 讨论 并 不 是 那么 有 用 ， 只 是 更 多 地 在 实 
践 模拟 一 些 语言 中 关于 这 个 模式 的 一 些 问题 的 解决 方案 。 这 些 语言 主要 是 (静态 
的 ) 基于 类 的 语言 ， 在 这 些 语言 中 ， 函 数 并 不 是 "一 等 公民 "。 


下 面 的 代码 片段 展示 了 期 望 的 结果 《假设 你 忽略 了 多 元 宇宙 的 设想 ， 接 受 了 只 有 一 个 宇宙 的 
观点 ) 


var uni = new Universe(); 
var uni2 = new Universe(); 
uni === uni2; // true 


在 这 个 例子 中 ，Uni 只 在 构造 函数 第 一 次 被 调用 时 创建 。 第 二 次 (以 及 后 续 更 多 次 ) 调用 时 ， 
同一 个 uni 对象 被 返回 。 这 就 是 为 什么 uni === uni2 的 原 因为 它们 实际 上 是 同一 个 对 象 的 
两 个 引用 。 那 么 怎么 在 JavaScript 达 到 这 个 效果 呢 ? 





当 对 象 实例 this 被 创建 时 ， 你 需要 在 Universe 构 造 函 数 中 缓存 它 ， 以 便 在 第 二 次 调用 的 时 候 返 
回 。 有 几 种 选择 可 以 达到 这 种 效果 : 


eo 你 可 以 使 用 一 个 全 局 变量 来 存储 实例 。 不 推荐 使 用 这 种 方法 ， 因 为 通常 我 们 认为 使 用 全 
局 变量 是 不 好 的 。 而 且 ， 任 何人 都 可 以 改写 全 局 变量 的 值 ， 甚 至 可 能 是 无 意 中 改 写 。 所 
以 我 们 不 再 讨论 这 种 方案 。 

o 你 也 可 以 将 对 象 实例 缓存 在 构造 函数 的 属性 中 。 在 JavaScript 中 ， 函 数 也 是 对 象 ， 所 以 它 
们 也 可 以 有 属性 。 你 可 以 写 一 些 类 似 Universe.instance 的 属性 来 缓存 对 象 。 这 是 一 种 漂 
亮 干净 的 解决 方案 ， 不 足 之 处 是 instance 属 性 仍然 是 可 以 被 公开 访问 的 ， 别 人 写 的 代码 可 
能 修改 它 ， 这 样 就 会 失去 这 个 实例 。 

e 你 可 以 将 实例 包 计 在 闭 包 中 。 这 可 以 保持 实例 是 私有 的 ， 不 会 在 构造 函数 之 外 被 修改 ， 
代价 是 一 个 额外 的 闭 包 。 


让 我 们 来 看 一 下 第 二 种 和 第 三 种 方案 的 实现 示例 。 


将 实例 放 到 静态 属性 中 


下 面 是 一 个 将 唯一 的 实例 放 入 Universe 构 造 函 数 的 一 个 静态 属性 中 的 例子 : 


function Universe() { 


// do we have an existing instance? 

if (typeof Universe.instance === "object") { 
return Universe.instance; 

} 


// proceed as normal 
this.start_time = 0; 
this.bang = "Big"; 


// cache 
Universe.instance = this; 


// implicit return: 
// return this; 


} 


// testing 

var uni = new Universe(); 
var uni2 = new Universe(); 
uni === uni2; // true 


如 你 所 见 ， 这 是 一 种 直接 有 效 的 解决 方案 ， 唯 一 的 缺陷 是 instance 是 可 被 公开 访问 的 。 一 般 来 
说 它 被 其 它 代码 误 删 改 的 可 能 是 很 小 的 (起码 比 全 局 变量 instance 要 小 得 多 ) ， 但 是 仍然 是 有 
可 能 的 。 


将 实例 放 到 闭 包 中 


另 一 种 实现 基于 类 的 单 例 模 式 的 方法 是 使 用 一 个 闭 包 来 保护 这 个 唯一 的 实例 。 你 可 以 通过 第 5 
章 讨 论 过 的 “私有 静态 成 员 模 式 "来 实现 。 唯 一 的 秘密 就 是 重 写 构 造 函 数 : 


function Universe() { 


// the cached instance 
var instance = this; 


// proceed as normal 
this.start_time = 0; 
this.bang = "Big"; 


// rewrite the constructor 
Universe = function () { 
return instance; 


tn 
} 


// testing 

var uni = new Universe(); 
var uni2 = new Universe(); 
uni === uni2; // true 


第 一 次 调用 时 ， 原 始 的 构造 汇 数 被 调用 并 且 正 常 返回 this。 在 后 续 的 调用 中 ， 被 重 写 的 构造 瑟 
数 被 调用 。 被 重 写 怕 这 个 构造 函数 可 以 通过 闭 包 访问 私有 的 instance 变 量 并 且 将 它 返回 。 


这 个 实现 实际 上 也 是 第 4 章 讨论 的 自 定义 函数 的 又 一 个 例子 。 如 我 们 讨论 过 的 一 样 ， 这 种 模式 
的 缺点 是 被 重 写 的 函数 (在 这 个 例子 中 就 是 构造 函数 Universe()) 将 丢失 那些 在 初始 定义 和 重 
新 定义 之 间 添 加 的 属性 。 在 这 个 例子 中 ， 任 何 添加 到 Universe() 的 原型 上 的 属性 将 不 会 被 链接 


到 使 用 原来 的 实现 创建 的 实例 上 。 ( 注 : 这 里 的 “原来 的 实现 "是 指 实例 是 由 未 被 重 写 的 构造 函 
数 创 建 的 ， 而 Universe() 则 是 被 重 写 的 构造 函数 。) 


下 面 我 们 通过 一 些 测试 来 展示 这 个 问题 : 


// adding to the prototype 
Universe.prototype.nothing = true; 


var uni = new Universe(); 


// again adding to the prototype 
// after the initial object is created 
Universe.prototype.everything = true; 


var uni2 = new Universe(); 


Testing: 

// only the original prototype was 
// linked to the objects 
uni.nothing; // true 

uni2.nothing; // true 
uni.everything; // undefined 
uni2.everything; // undefined 


// that sounds right: 
uni.constructor.name; // "Universe" 


// but that's odd: 
uni.constructor === Universe; // false 


uni.constructor 不 再 和 Universe() 相 同 的 原因 是 uni.constructor 仍 然 是 指向 原来 的 构造 函数 ， 而 
不 是 被 重新 定义 的 那个 。 


如 果 一 定 被 要 求 让 prototype 和 constructor 的 指向 像 我 们 期 望 的 那样 ， 可 以 通过 一 些 调整 来 做 
到 : 


function Universe() { 


// the cached instance 
var instance; 


// rewrite the constructor 
Universe = function Universe() { 
return instance; 


}; 


// carry over the prototype properties 
Universe.prototype = this; 


// the instance 
instance = new Universe(); 


// reset the constructor pointer 
instance.constructor = Universe; 


// all the functionality 
instance.start_time = 0; 
instance.bang = "Big"; 


return instance; 


现在 所 有 的 测试 结果 都 可 以 像 我 们 期 望 的 那样 了 : 


// update prototype and create instance 


Universe.prototype.nothing = true; // true 
var uni = new Universe(); 
Universe.prototype.everything = true; // true 


var uni2 = new Universe(); 


// it's the same single instance 
uni === uni2; // true 


// all prototype properties work 
// no matter when they were defined 


uni.nothing && uni.everything && uni2.nothing && uni2.everything; // true 


// the normal properties work 
uni.bang; // "Big" 

// the constructor points correctly 
uni.constructor === Universe; // true 


另 一 种 可 选 的 解决 方案 是 将 构造 函数 和 实例 包 在 一 个 立即 执行 的 函数 中 。 当 构造 函数 第 一 次 


被 调用 的 时 候 ， 它 返回 一 个 对 象 并 且 将 私有 的 instance 指 向 它 
文 种 新 的 实现 下 ， 前 面 所 有 的 测试 代码 也 会 和 期 望 的 一 样 : 


简单 地 返回 这 个 私有 变量 。 


在 这 


var Universe; 
(function () { 
var instance; 
Universe = function Universe() { 
if (instance) { 


return instance; 


instance = this; 


// all the functionality 
this.start_time = 0; 
this.bang = "Big"; 

}; 


}()); 


工厂 模式 


使 用 工厂 模式 的 目的 就 是 创建 对 象 。 它 通 


。 在 后 续 调 用 时 ， 构 造 函 数 


常 被 在 类 或 者 类 的 静态 方法 中 实现 ， 目 的 是 : 


o 执行 在 建立 相似 的 对 人 象 时 进行 的 一 些 重复 操作 


。 让 工厂 的 使 用 者 在 编译 阶段 创建 对 象 时 不 必 知 道 


第 二 点 在 静态 的 基于 类 
类 的 实例 是 不 普通 的 行为 。 但 在 JavaScript 中 ， 


和 语言 中 更 重要 ， 因 为 在 (编译 阶段 ) 提前 不 知道 类 


它 的 特定 类 型 (X) 


这 部 分 的 实现 却 是 相当 容易 的 事情 。 


日 
RE 


的 情况 下 ， 创 建 


使 用 工厂 方法 (或 类 ) 创建 的 对 象 被 设计 为 从 同一 个 父 对 象 继 承 ; 它们 是 特定 的 实现 一 些 特 
珠 功 能 的 子 类 。 有 些 时 候 这 个 共同 的 父 对 象 就 是 包含 工厂 方法 的 同一 个 类 。 


我 们 来 看 一 个 示例 实现 ， 我 们 有 : 


。 一 个 共同 的 父 构造 函数 CarMaker 。 

e CarMaker 的 一 个 静态 方法 叫 factory()， 用 来 创建 car 对 象 。 

o 特定 的 从 CarMaker 继 承 而 来 的 构造 函数 CarMaker.Compact，CarMakerSUV， 
CarMaker.Convertible。 它 们 都 被 定义 为 父 构 造 济 数 的 静态 属性 以 便 保持 全 局 空间 干净 ， 
同时 在 需要 的 时 候 我 们 也 知道 在 哪里 找到 它们 。 

我 们 来 看 一 下 已 经 完成 的 实现 会 怎么 被 使 用 : 

var corolla = CarMaker.factory('Compact'); 

var solstice = CarMaker.factory('Convertible'); 

var cherokee = CarMaker.factory('SUV'); 

corolla.drive(); // "Vroom, I have 4 doors" 


solstice.drive(); // "Vroom, I have 2 doors" 
cherokee.drive(); // "Vroom, I have 17 doors" 


这 一 段 : 
var corolla = CarMaker.factory('Compact'); 
可 能 是 工厂 模式 中 最 知名 的 。 你 有 一 个 方法 可 以 在 运行 时 接受 一 个 表示 类 型 的 字符 囊 ， 然 后 


它 创建 并 返回 了 一 个 和 请 求 的 类 型 一 样 的 对 象 。 这 里 没有 使 用 new 的 构造 函数 ， 也 没有 看 到 任 
何 对 象 字面 量 ， 仅 仅 只 有 一 个 函数 根据 一 个 字符 串 指定 的 类 型 创建 了 对 象 。 


这 里 是 一 个 工厂 模式 的 示例 实现 ， 它 能 让 上 面 的 代码 片段 工作 : 


// parent constructor 
function CarMaker() {} 


// a method of the parent 
CarMaker.prototype.drive = function () { 

return "Vroom, I have " + this.doors + " doors"; 
3; 


// the static factory method 
CarMaker.factory = function (type) { 
var constr = type, 
newcar; 


// error if the constructor doesn't exist 
if (typeof CarMaker[constr] !== "function") { 
throw { 
name: "Error", 
message: constr + " doesn't exist" 
}; 
} 


// at this point the constructor is known to exist 

// let's have it inherit the parent but only once 

if (typeof CarMaker[constr].prototype.drive !== "function") { 
CarMaker[constr].prototype = new CarMaker(); 


// create a new instance 

newcar = new CarMaker[constr](); 

// optionally call some methods and then return... 
return newcar; 


}; 


// define specific car makers 
CarMaker .Compact = function () { 
this.doors = 4; 


CarMaker .Convertible = function () { 
this.doors = 2; 

}; 

CarMaker.SUV = function () { 
this.doors = 24; 


}; 


工厂 模式 的 实现 中 没有 什么 是 特别 困难 的 。 你 需要 做 的 仅仅 是 寻找 请 求 类 型 的 对 象 的 构造 函 
数 。 在 这 个 例子 中 ， 使 用 了 一 个 简单 的 名 字 转 换 以 便 映射 对 象 类 型 和 创建 对 象 的 构造 函数 。 
继承 的 部 分 只 是 一 个 公共 的 重复 代码 片段 的 示例 ， 它 可 以 被 放 到 工厂 方法 中 而 不 是 被 每 个 构 
造 函 数 的 类 型 重复 。 (译注 : 指 通过 原型 继承 的 代码 可 以 在 factory 方 法 以 外 执行 ， 而 不 是 放 
到 factory 中 每 调用 一 次 都 要 执行 一 次 。) 


内 置 对 象 工厂 


作为 一 个 “野生 的 工厂 ”的 例子 ， 我 们 来 看 一 下 内 置 的 全 局 构造 函数 Object()。 它 的 行为 很 像 工 
厂 ， 因 为 它 根据 不 同 的 输入 创建 不 同 的 对 和 象 。 如 果 传 入 一 个 数字 ， 它 会 使 用 Number() 构 造 孙 
数 创 建 一 个 对 象 。 在 传 入 字符 串 和 布尔 值 的 时 候 也 会 发 生 同 样 的 事情 。 任 何其 它 的 值 (包括 
空 值 ) 将 会 创建 一 个 正常 的 对 象 。 


下 面 是 这 种 行为 的 例子 和 测试 ， 注 意 Object 调 用 时 可 以 不 用 加 new : 


var 0 = new Object(), 

n = new Object(1), 

s = Object('1'), 

b = Object(true); 
// test 
o.constructor === Object; // true 
n.constructor === Number; // true 
s.constructor === String; // true 
b.constructor === Boolean; // true 


Object() 也 是 一 个 工厂 这 一 事实 可 能 没有 太 多 实际 用 处 ， 仅 仅 是 觉得 值得 作为 一 个 例子 提 一 
下 ， 告 诉 我 们 工厂 模式 是 随处 可 见 的 。 


迭代 器 


在 和 迭代 器 模式 中 ， 你 有 一 些 爹 有 有 序 聚 合 数据 的 对 象 。 这 些 数据 可 能 在 内 部 用 一 种 复杂 的 结 
构 存 储 着 ， 但 是 你 希望 提供 一 种 简单 的 方法 来 访问 这 种 结构 中 的 每 个 元 素 。 数 据 的 使 用 者 不 
需要 知道 你 是 怎样 组 织 你 的 数据 的 ， 他 们 只 需要 操作 一 个 个 独立 的 元 素 。 


在 达 代 器 模式 中 ， 你 的 对 象 需要 提供 一 个 next() 方 法 。 按 顺序 调用 next() 方 法 必须 返回 序列 中 
的 下 一 个 元 素 ， 但 是 “下 一 个 "在 你 的 特定 的 数据 结构 中 指 什么 是 由 你 自己 来 决定 的 。 


假设 你 的 对 象 叫 agg， 你 可 以 通过 简单 地 在 循环 中 调用 next() 来 访问 每 个 数据 元 素 ， 像 这 


var element; 

while (element = agg.next()) { 
// do something with the element ... 
console.log(element); 


} 


在 迭代 器 模式 中 ， 聚 合 对 象 通常 也 会 提供 一 个 方便 的 方法 hasNext()， 这 样 对 象 的 使 用 者 就 可 
以 知道 他 们 已 经 获取 到 你 数据 的 最 后 一 个 元 素 。 当 使 用 另 一 种 方法 一 一 hasNext() 一 一 来 按 顺 
序 访问 所 有 元 素 时 ， 是 像 这 样 的 : 





while (agg.hasNext()) { 
// do something with the next element... 
console. log(agg.next()); 


} 
+ nu, 
饰 器 


在 装饰 器 模式 中 ， 一 些 额外 的 功能 可 以 在 运行 时 被 动态 地 添加 到 一 个 对 象 中 。 在 静态 的 基于 
类 的 语言 中 ， 处 理 这 个 问题 可 能 是 个 挑战 ， 但 是 在 JavaScript 中 ， 对 象 本 来 就 是 可 变 的 ， 所 以 
给 一 个 对 象 添加 额外 的 功能 本 身 并 不 是 什么 问题 。 


装饰 器 模式 的 一 个 很 方便 的 特性 是 可 以 对 我 们 需要 的 特性 进行 定制 和 配置 。 刚 开始 时 ， 我 们 
有 一 个 拥有 基本 功能 的 对 象 ， 然 后 可 以 从 可 用 的 装饰 器 中 去 挑选 一 些 需 要 用 到 的 去 增加 这 个 
对 象 ， 甚 至 如 果 顺 序 很 重要 的 话 ， 还 可 以 指定 增强 的 顺序 。 


用 法 


我 们 来 看 一 下 这 个 模式 的 示例 用 法 。 假 设 你 正在 做 一 个 卖 东 西 的 web 应 用 ， 每 个 新 交易 是 一 个 
新 的 sale 对 象 。 这 个 对 象 “ 知 道 " 交 易 的 价格 并 且 可 以 通过 调用 sale.getPrice() 方 法 返回 。 根 据 
环境 的 不 同 ， 你 可 以 开始 用 一 些 额 外 的 功能 来 装饰 这 个 对 象 。 假 设 一 个 场景 是 这 笔 交 易 是 发 
o 大 的 一 个 省 Québec， 在 这 种 情况 下 ， 购 买 者 需要 付 联 邦 税 和 QUEbec 省 税 。 根 据 装 

a > 你 需要 指明 使 用 联邦 税 装 饰 器 和 QUuEbec 省 税 装饰 器 来 装饰 这 个 对 象 。 然 后 
ns 下 可 以 给 这 个 对 象 装 饰 一 些 价 格格 式 的 功能 。 这 个 场景 的 使 用 方式 可 能 是 像 这 样 : 


var sale = new Sale(100); // the price is 100 dollars 
sale = sale.decorate('fedtax'); // add federal tax 
sale = sale.decorate('quebec'); // add provincial tax 
sale = sale.decorate('money'); // format like money 
sale.getPrice(); // "$112.88" 


在 另 一 种 场景 下 ， 购 买 者 在 一 个 不 需要 交 省 税 的 省 ， 并 且 你 想 用 加 拿 大 元 的 格式 来 显示 价 
格 ， 你 可 以 这 样 做 : 


var sale = new Sale(100); // the price is 100 dollars 
sale = sale.decorate('fedtax'); // add federal tax 
sale = sale.decorate('cdn'); // format using CDN 
sale.getPrice(); // "CDN$ 105.00" 


如 你 所 见 ， 这 是 一 种 在 运行 时 很 灵活 的 方法 来 添加 功能 和 调整 对 象 。 我 们 来 看 一 下 如 何 来 实 
现 这 种 模式 。 


实现 


一 种 实现 装饰 器 模式 的 方法 是 让 每 个 装饰 器 成 为 一 个 拥有 应 该 被 重 写 的 方法 的 对 象 。 每 个 装 
饰 器 实际 上 是 继承 自己 经 被 前 一 个 装饰 器 增强 过 的 对 象 。 装 饰 器 的 每 个 方法 都 会 调用 父 对 象 
《继承 自 的 对 象 ) 的 同名 方法 并 取得 值 ， 然 后 做 一 些 额外 的 处 理 。 


最 终 的 效果 就 是 当 你 在 第 一 个 例子 中 调用 sale.getPrice() 时 ， 实 际 上 是 在 调用 money 装 饰 器 的 
方法 (图 7-1) 。 但 是 因为 每 个 装饰 器 会 先 调用 父 对 象 的 方法 ， i money get Nesta) 用 
quebec 的 getPrice()， 而 它 又 会 去 调用 fedtax 的 getPrice() 方 法 ， 依 次 类 推 。 这 个 链 会 一 直 走 到 
原始 的 未 经 装饰 的 由 Sale() 构 造 函 数 实现 的 getPrice()。 


Sale.prototype.getPrice() 


fedtax.getPrice() 


quebec.getPrice() 





money.getPrice() mame sale.getPrice() 





图 7-1 
装饰 器 模式 的 实现 


这 个 实现 以 一 个 构造 函数 和 一 个 原型 方法 开始 : 


function Sale(price) { 
this.price = price || 100; 


Sale.prototype.getPrice = function () { 
return this.price; 


}; 


MS 


5 对象 将 都 被 作为 构造 函数 的 属性 实现 : 


装饰 


Sale.decorators = {}; 


我 们 来 看 一 个 装饰 器 的 例子 。 这 是 一 个 对 象 ， 实 现 了 一 个 自 定义 的 getPrice() 方 法 。 注 意 这 个 
方法 首先 从 父 对 象 的 方法 中 取 值 然后 修改 这 个 值 : 


Sale.decorators.fedtax = { 
getPrice: function () { 
var price = this.uber.getPrice(); 
price += price * 5 / 100; 
return price; 


yi 


使 用 类 似 的 方法 我 们 可 以 实现 任意 多 个 需要 的 其 它 装饰 器 。 他 们 的 实现 方式 像 插件 一 样 来 扩 
展 核心 的 Sale() 的 功能 。 他 们 甚至 可 以 被 放 到 额外 的 文件 中 ， 被 第 三 方 的 开发 者 来 开发 和 共 
F 
Sale.decorators.quebec = { 
getPrice: function () { 
var price = this.uber.getPrice(); 
price += price * 7.5 / 100; 
return price; 


} 
}; 


Sale.decorators.money = { 
getPrice: function () { 
return "$" + this.uber.getPrice().toFixed(2); 
} 


}; 
Sale.decorators.cdn = { 


getPrice: function () { 
return "CDN$ " + this.uber.getPrice().toFixed(2); 
} 


}; 


最 后 我 们 来 看 decorate() 这 个 神奇 的 方法 ， 它 把 所 有 上 面 说 的 片段 都 串 起 来 了 。 记 得 它 是 这 样 
被 调用 的 : 


sale = sale.decorate('fedtax'); 


字符 串 fedtax' 对 应 在 Sale.decorators.fedtax 中 实现 的 对 象 。 被 装饰 过 的 最 新 的 对 象 newobj 将 
从 现在 有 的 对 象 ( 也 就 是 this 对 象 ， 它 要 么 是 原始 的 对 象 ， 要 么 是 经 过 最 后 一 个 装饰 器 装饰 过 
的 对 象 ) 中 继承 。 实 现 这 一 部 分 需要 用 到 前 面 章节 中 提 到 的 临时 构造 函数 模式 。 我 们 也 设置 

一 个 uber 属 性 给 newobj 以 便 子 对 象 可 以 访问 到 父 对 象 。 然 后 我 们 从 装饰 器 中 复制 所 有 额外 的 

属性 到 被 装饰 的 对 象 newobj 中 。 有 最后， 在 我 们 的 例子 中 ，newobj 被 返回 并 且 成 为 被 更 新 过 的 
Sale 对 象 。 


Sale.prototype.decorate = function (decorator) { 
var F = function () {}, 
overrides = this.constructor.decorators[decorator], 
i, newobj; 
F.prototype = this; 
newobj = new F(); 
newobj.uber = F.prototype; 
for (i in overrides) { 
if (overrides.hasOwnProperty(i)) { 
newobj[i] = overrides[i]; 
} 
} 


return newobj; 


使 用 列表 实现 


我 们 来 看 另 一 个 明显 不 同 的 实现 方法 ， 受 益 于 JavaScript 的 动态 特性 ， 它 完全 不 需要 使 用 继 
承 。 同 时 ， 我 们 也 可 以 简单 地 将 前 一 个 方面 的 结果 作为 参数 传 给 下 一 个 方法 ， 而 不 需要 每 一 
个 方法 都 去 调用 前 一 个 方法 。 


这 样 的 实现 方法 还 允许 很 容易 地 反 装 饰 (undecorating) 或 者 撤销 一 个 装饰 ， 这 仅仅 需要 从 一 
个 装饰 器 列表 中 移 除 一 个 条 目 。 


用 法 示例 也 会 明显 简单 一 些 ， 因 为 我 们 不 需要 将 decorate() 的 返回 值 赋值 给 对 象 。 在 这 个 实现 
中 ，decorate() 不 对 对 象 做 任何 事情 ， 它 只 是 简单 地 将 装饰 器 加 入 到 一 个 列表 中 : 


var sale = new Sale(100); // the price is 100 dollars 
sale.decorate('fedtax'); // add federal tax 
sale.decorate('quebec'); // add provincial tax 
sale.decorate('money'); // format like money 
sale.getPrice(); // "$112.88" 


Sale() 构 造 函 数 现 在 有 了 一 个 作为 自己 属性 的 装饰 器 列表 : 


function Sale(price) { 
this.price = (price > 0) || 100; 
this.decorators_list = []; 


可 用 的 装饰 器 仍然 被 实现 为 Sale.decorators 的 属性 。 注 意 getPrice() 方 法 现在 更 简单 了 ， 因 为 
它们 不 需要 调用 父 对 象 的 getPrice() 来 获取 结果 ， 结 果 已 经 作为 参数 传递 给 它们 了 : 


Sale.decorators = {}; 


Sale.decorators.fedtax = { 
getPrice: function (price) { 
return price + price * 5 / 100; 
} 


}; 


Sale.decorators.quebec = { 
getPrice: function (price) { 
return price + price * 7.5 / 100; 
} 


}; 


Sale.decorators.money = { 
getPrice: function (price) { 
return "$" + price.toFixed(2); 
} 
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最 有 趣 的 部 分 发 生 在 父 对 象 的 decorate() 和 getPrice() 方 法 上 。 在 前 一 种 实现 方式 中 ， 
decorate() 还 是 多 少 有 些 复 杂 ， 而 getPrice() 十 分 简单 。 在 这 种 实现 方式 中 事情 反 过 来 了 : 
decorate() 只 需要 往 列表 中 添加 条 目 而 getPrice() 做 了 所 有 的 工作 。 这 些 工作 包括 遍历 现在 添加 
的 装饰 器 的 列表 ， 然 后 调用 它们 的 getPrice() 方 法 ， 并 将 结果 传递 给 前 一 个 : 


Sale.prototype.decorate = function (decorator) { 
this.decorators_list.push(decorator); 


3; 
Sale.prototype.getPrice = function () { 
var price = this.price, 
i, 
max = this.decorators_list.length, 
name; 
for (i = 0; i < max; i += 1) { 
name = this.decorators_list[i]; 
price = Sale.decorators[name].getPrice(price); 


} 


return price; 


}; 


装饰 器 模式 的 第 二 种 实现 方式 更 简单 一 些 ， 并 且 没 有 引入 继承 。 装 饰 的 方法 也 会 简单 。 所 有 
的 工作 都 由 “同意 "被 装饰 的 方法 来 做 。 在 这 个 示例 实现 中 ，getPrice() 是 唯一 被 允许 装饰 的 方 
法 。 如 果 你 想 有 更 多 可 以 被 装饰 的 方法 ， 那 遍历 装饰 器 列表 的 工作 就 需要 由 每 个 方法 重复 去 
做 。 但 是 ， 这 可 以 很 容易 地 被 抽象 到 一 个 辅助 方法 中 ， 给 它 传 一 个 方法 然后 使 这 个 方法 “可 被 
装饰 "。 如 果 这 样 实现 的 话 ，decorators_ list 属性 就 应 该 是 一 个 对 象 ， 它 的 属性 名 字 是 方法 名 ， 
值 是 装饰 器 对 象 的 数组 。 


策略 模式 


策略 模式 允许 在 运行 的 时 候选 择 算 法 。 你 的 代码 的 使 用 者 可 以 在 处 理 特定 任务 的 时 候 根 据 即 
将 要 做 的 事情 的 上 下 文 来 从 一 些 可 用 的 算法 中 选择 一 个 。 


使 用 策略 模式 的 一 个 例子 是 解决 表单 验证 的 问题 。 你 可 以 创建 一 个 validator 对 象 ， 有 一 个 
validate() 方 法 。 这 个 方法 被 调用 时 不 用 区 分 具体 的 表单 类 型 ， 它 总 是 会 返回 同样 的 结果 一 一 
一 个 没有 通过 验证 的 列表 和 错误 信息 。 


但 是 根据 具体 的 需要 验证 的 表单 和 数据 ， 你 代码 的 使 用 者 可 以 选择 进行 不 同类 别 的 检查 。 你 
的 validator 选 择 最 佳 的 策略 来 处 理 这 个 任务 ， 然 后 将 具体 的 数据 检查 工作 交 给 合适 的 章法 去 
做 。 


数据 验 征 示例 


假设 你 有 一 个 下 面 这 样 的 数据 ， 它 可 能 来 自 页 面 上 的 一 个 表单 ， 你 希望 验证 它 是 不 是 有 效 的 
数据 : 


var data = { 
first_name: "Super", 
last_name: "Man", 
age: "unknown", 
username: "o_O" 


对 这 个 例子 中 的 validator， 它 需要 知道 哪个 是 最 佳 策略 ， 因 此 你 需要 先 配置 它 ， 给 它 设 定好 规 
则 以 确定 哪些 是 有 效 的 数据 。 


假设 你 不 需要 姓 ， 名 字 可 以 接受 任何 内 容 ， 但 要 求 年 龄 是 一 个 数字 ， 并 且 用 户 名 只 允许 包 
字母 和 数字 。 配 置 可 能 是 这 样 的 : 


validator.config = { 
first_name: 'isNonEmpty', 
age: 'isNumber', 
username: 'isAlphaNum' 


}; 


现在 validator 对 象 已 经 有 了 用 来 处 理 数据 的 配置 ， 你 可 以 调用 validate() 方 法 ， 然 后 将 任何 验证 
着 误 打印 到 控制 全 上 : 
validator.validate(data); 


if (validator.hasErrors()) { 
console. log(validator.messages.join("\n")); 
} 


它 可 能 会 打印 出 这 样 的 信息 : 


Invalid value for *age*, the value can only be a valid number, e.g. 1, 3.14 or 2010 
Invalid value for *username*, the value can only contain characters and numbers, no speci 


ETE] 





现在 我 们 来 看 一 下 这 个 validator 是 如 何 实现 的 。 所 有 可 用 的 用 来 检查 的 逻辑 都 是 拥有 一 个 
validate() 方 法 的 对 象 ， 它 们 还 有 一 行 辅助 信息 用 来 显示 错误 信息 : 


// checks for non-empty values 
validator.types.isNonEmpty = { 
validate: function (value) { 
return value !== ""; 
}, 


instructions: "the value cannot be empty" 


}; 


// checks if a value is a number 
validator.types.isNumber = { 
validate: function (value) { 
return !isNaN(value); 
}, 


instructions: "the value can only be a valid number, e.g. 1, 3.14 or 2010" 
}; 
// checks if the value contains only letters and numbers 
validator.types.isAlphaNum = { 
validate: function (value) { 
return !/[4a-z0-9]/i.test(value); 
}, 


instructions: "the value can only contain characters and numbers, no special symbols" 


J; 
4 — 


最 后 ，validator 对 象 的 核心 是 这 样 的 : 





var validator = { 


// all available checks 
types: {}, 


// error messages in the current 
// validation session 
messages: [], 


// current validation config 
// name: validation type 
config: {}, 


// the interface method 
// ~data~ is key => value pairs 
validate: function (data) { 


var i, msg, type, checker, result_ok; 


// reset all messages 
this.messages = []; 
for (i in data) { 


if (data.hasOwnProperty(i)) { 


type = this.config[i]; 
checker = this.types[type]; 


if (!type) { 
continue; // no need to validate 


} 
if (!checker) { // uh-oh 
throw { 
name: "ValidationError", 
message: "No handler to validate type " + type 


}; 
} 


result_ok = checker.validate(data[i]); 

if (!result_ok) { 
msg = "Invalid value for *" + i + "*, " + checker.instructions; 
this.messages.push(msg); 


} 


return this.hasErrors(); 


}, 
// helper 


hasErrors: function () { 
return this.messages.length !== 0; 
} 


}; 


如 你 所 见 ，validator 对 象 是 通用 的 ， 在 所 有 的 需要 验证 的 场景 下 都 可 以 保持 这 个 样子 。 改 进 它 
的 办 法 就 是 增加 更 多 类 型 的 检查 。 如 果 你 将 它 用 在 很 多 页 面 上 ， 每 快 你 就 会 有 一 个 非常 好 的 
验证 类 型 的 集合 。 然 后 在 每 个 新 的 使 用 场景 下 你 需要 做 的 仅仅 是 配置 validator 然 后 调用 
validate() 方 法 。 


外 观 模式 


外 观 模 式 是 一 种 很 简单 的 模式 ， 它 只 是 为 对 象 提供 了 更 多 的 可 供 选 择 的 接口 。 使 方法 保持 短 
小 而 不 是 处 理 太 多 的 工作 是 一 种 很 好 的 实践 。 在 这 种 实践 的 指导 下 ， 你 会 有 一 大 堆 的 方法 ， 
而 不 是 一 个 有 着 非常 多 参数 的 uber 方 法 。 有 些 时 候 ， 两 个 或 者 更 多 的 方法 会 经 常 被 一 起 调 
用 。 在 这 种 情况 下 ， 创 建 另 一 个 将 这 些 重复 调用 包 误 起 来 的 方法 就 变 得 意义 了 。 


例如 ， 在 处 理 浏览 器 事件 的 时 候 ， 有 以 下 的 事件 : 
e stopPropagation() 
阻止 事件 冒 泡 到 父 节 点 
e preventDefault() 
阻止 浏览 器 执行 默认 动作 (如 打开 链接 或 者 提交 表单 ) 


这 是 两 个 有 不 同 目 的 的 相互 独立 的 方法 ， 他 们 也 应 该 被 保持 独立 ， 但 与 此 同时 ， 他 们 也 经 常 
被 一 起 调用 。 所 以 为 了 不 在 应 用 中 到 处 重复 调用 这 两 个 方法 ， 你 可 以 创建 一 个 外 观 方法 来 调 
用 它们 : 


var myevent = { 
WE owe 
stop: function (e) { 
e.preventDefault(); 
e.stopPropagation(); 
} 
UN acne 


}; 


外 观 模 式 也 适用 于 一 些 浏览 器 脚本 的 场景 ， 即 将 浏览 器 的 差异 隐藏 在 一 个 外 观 方法 下 面 。 继 
续 前 面 的 例子 ， 你 可 以 添加 一 些 处 理 |E 中 事件 API 的 代码 : 


var myevent = { 
人 
stop: function (e) { 
// others 
if (typeof e.preventDefault === "function") { 
e.preventDefault(); 
if (typeof e.stopPropagation === "function") { 
e.stopPropagation(); 
} 
// IE 
if (typeof e.returnValue === "boolean") { 
e.returnValue = false; 
if (typeof e.cancelBubble === "boolean") { 
e.cancelBubble = true; 
} 
} 
HL sxe 


外 观 模 式 在 做 一 些 重新 设计 和 重 构 工作 时 也 很 有 用 。 当 你 想 用 一 个 不 同 的 实现 来 葵 换 某 个 对 
象 的 时 候 ， 你 可 能 需要 工作 相当 长 一 段 时 间 (一 个 复杂 的 对 象 ) ， 与 此 同时 ， 一 些 使 用 这 个 
新 对 象 的 代码 也 在 被 同步 编写 。 你 可 以 先 想 好 新 对 象 的 API， 然 后 使 用 新 的 API 创 建 一 个 外 观 


方法 在 昌 的 对 象 前 面 。 使 用 这 种 方式 ， 当 你 完全 替换 到 昌 的 对 象 的 时 候 ， 你 只 需要 修改 少量 
客户 代码 ， 因 为 新 的 客户 代码 已 经 是 在 使 用 新 的 API 了 © 


代理 模式 


在 代理 设计 模式 中 ， 一 个 对 象 充当 了 另 一 个 对 象 的 接口 的 角色 。 它 和 外 观 模式 不 一 样 ， 外 观 
模式 带 来 的 方便 仅 限于 将 几 个 方法 调用 联合 起 来 。 而 代理 对 象 位 于 某 个 对 象 和 它 的 客户 之 
间 ， 可 以 保护 对 对 象 的 访问 。 


这 个 模式 看 起 来 开销 有 点 大 ， 但 在 出 于 性 能 考虑 时 非常 有 用 。 代 理 对 象 可 以 作为 对 象 (也 
ys Fay EAR") 的 保护 者 ， 让 申 正 的 主体 对 象 做 尽量 少 的 工作 。 


一 种 示例 用 法 是 我 们 称 之 为 “ 懒 初始 化 ”( 延 迟 初始 化 ) 的 东西 。 假 设 初 始 化 卜 正 的 主体 是 开销 
很 大 的 ， 并 且 正 好 客户 代码 将 它 初始 化 后 并 不 丨 正 使 用 它 。 在 这 种 情况 下 ， 代 理 对 象 可 以 作 
为 监 正 的 主体 的 接口 起 到 帮助 作用 。 代 理 对 象 接收 到 初始 化 请 求 ， 但 在 申 正 的 主体 上 正 被 使 
用 之 前 都 不 会 将 它 传递 过 去 。 


图 7-2 展 示 了 这 个 场景 ， 当 客户 代码 发 出 初始 化 请 求 时 ， 代 理 对 象 回 复 一 切 就 绪 ， 但 并 没有 将 
请 求 传递 过 去 ， 只 有 在 客户 代码 芙 正 需要 趴 正 的 主体 做 些 工作 的 时 候 才 将 两 个 请 求 一 起 传 北 
过 去 。 


图 7-2 通过 代理 对 象 时 客户 代码 与 真正 的 主体 的 关系 


一 个 例子 


在 真正 的 主体 做 某 件 工作 开销 很 大 时 ， 代 理 模 式 很 有 用 处 。 在 web 应 用 中 ， 开 销 最 大 的 操作 之 
一 就 是 网 络 请 求 ， 此 时 尽 可 能 地 合并 HTTP 请 求 是 有 意义 的 。 我 们 来 看 一 个 这 种 场景 下 应 用 代 
理 模 式 的 实例 。 


一 个 视频 列表 (expando ) 


我 们 假设 有 一 个 用 来 播放 选中 视频 的 应 用 。 你 可 以 在 这 里 看 到 上 趴 实 的 例 
子 http:/www.jspatterns.com/book/7/proxy.html ° 

页 面 上 有 一 个 视频 标题 的 列表 ， 当 用 户 点 击 视频 标题 的 时 候 ， 标 题 下方 的 区 域 会 展开 并 显示 
视频 的 更 多 信息 ， 同 时 也 使 得 视频 可 被 播放 。 视 频 的 详细 信息 和 用 来 播放 的 URL 并 不 是 页 面 
的 一 部 分 ， 它 们 需要 通过 网 络 请 求 来 获取 。 服 务 端 可 以 接受 多 个 视频 ID， 这 样 我 们 就 可 以 在 
合适 的 时 候 通 过 一 次 请 求 多 个 视频 信息 来 减少 HTTP 请 求 以 加 快 应 用 的 速度 。 


我 们 的 应 用 允许 一 次 展开 好 几 个 (或 全 部 ) 视频 ， 所 以 这 是 一 个 合并 网 络 请 求 的 绝 好 机 会 。 


图 7-3 ARAMA] KR 


没有 代理 对 象 的 情况 
这 个 应 用 中 最 主要 的 角色 是 两 个 对 象 : 
e videos 


负责 对 信息 区 域 展 开 / 收 起 (videos.getlnfo() 方 法 ) 和 播放 视频 的 响应 
(videos.getPlayer() 方 法 ) 


e http 
负责 通过 http.makeRequest() 方 法 与 服务 端 通讯 


妆 没 有 代理 对 象 的 时 候 ，videos.getlnfo() 会 为 每 个 视频 调用 一 次 http.makeRequest() 方 法 。 妆 
我 们 添加 代理 对 象 proxy 后 ， 它 将 位 于 vidoes 和 http 中 间 ， 接 手 对 makeRequest() 的 调用 ， 并 在 
可 能 的 时 候 合并 请 求 。 


我 们 首先 看 一 下 没有 代理 对 象 的 代码 ， 然 后 添加 代理 对 象 来 提升 应 用 的 响应 速度 。 


HTML 


HTML 代 码 仅 仅 是 一 个 链接 列表 : 


<p><span id="toggle-all">Toggle Checked</span></p> 
<ol id="vids"> 
<li><input type="checkbox" checked><a 
href="http://new.music.yahoo.com/videoSs/ - -2158073">Gravedigger</a></li> 
<li><input type="checkbox" checked><a 
href="http://new.music.yahoo.com/videos/- -4472739">Save Me</a></1li> 
<li><input type="checkbox" checked><a 
href="http://new.music.yahoo.com/videos/- -45286339">Crush</a></1i> 
<li><input type="checkbox" checked><a 
href="http://new.music.yahoo.com/videos/- -2144530">Don't Drink The Water</a></1i> 
<li><input type="checkbox" checked><a 
href="http://new.music.yahoo.com/videos/- -217241800">Funny the Way It Is</a></li> 
<li><input type="checkbox" checked><a 
href="http://new.music.yahoo.com/videos/- -2144532">what Would You Say</a></1i> 
</ol> 


事件 处 理 
现在 我 们 来 看 一 下 事件 处 理 的 逻辑 。 首 先 我 们 定义 一 个 方便 的 快捷 函数 $ : 


var $ = function (id) { 
return document.getElementById(id); 
J; 


使 用 事件 代理 (第 8 章 有 更 多 关于 这 个 模式 的 内 容 ) ， 我 们 将 所 有 id="vids" 的 条 目 上 的 点 击 事 
件 统 一 放 到 一 个 函数 中 处 理 : 


$('vids').onclick = function (e) { 
var src, id; 


e = e || window.event; 
src = e.target || e.srcElement; 


if (src.nodeName !== "A") { 
return; 

} 

if (typeof e.preventDefault === "function") { 
e.preventDefault(); 


e.returnValue = false; 


id = srce.href.split('--')[1]; 


if (src.className === "play") { 
src.parentNode.innerHTML = videos.getPlayer(id); 
return; 

} 

src.parentNode.id = "v" + id; 

videos.getInfo(id); 

3; 
videos *t % 


Videos 对 象 有 三 个 方法 : 
e getPlayer() 
返回 播放 视频 需要 的 HTML 代 码 〈 跟 我 们 讨论 的 无 关 ) 
e updateList() 


网 络 请 求 的 回调 函数 ， 接 受 从 服务 器 返回 的 数据 ， 然 后 生成 用 于 视频 详细 信息 的 HTML 代 
码 。 这 一 部 分 也 没有 什么 太 有 趣 的 事情 。 


e getinfo() 


这 个 方法 切换 视频 信息 的 可 视 状 态 ， 同 时 也 调用 http 对 象 的 方法 ， 并 传递 UpdaetList() 作 
为 回调 函数 。 


下 面 是 这 个 对 象 的 代码 片段 : 


var videos = { 


getPlayer: function (id) {...}, 
updateList: function (data) {...}, 


getInfo: function (id) { 


var info = $('info' + id); 


if (!info) { 
http.makeRequest([id], "videos.updateList"); 
return; 

} 

if (info.style.display === "none") { 
info.style.display = ''; 

} else { 
info.style.display = 'none'; 

} 

} 
}; 
http 对 象 


http 对 象 只 有 一 个 方法 ， 它 向 Yahool! 的 YQL 服 务 发 起 一 个 JSONP 请 求 : 


var http = { 
makeRequest: function (ids, callback) { 
var url = 'http://query.yahooapis.com/vi/public/yql?q=', 
sql = 'select * from music.video.id where ids IN ("%ID%")', 
format = "format=json", 
handler = "callback=" + callback, 
script = document.createElement('script'); 


sql.replace('%ID%', ids.join('","')); 
encodeURIComponent (sql); 


sql 
sql 


url += sql + '&' + format + '&' + handler; 
script.src = url; 


document. body.appendChild(script) ; 


} 
}; 


YQL (Yahoo! Query Language) 是 一 种 web service， 它 提供 了 使 用 类 似 SQL 的 语法 来 
调用 很 多 其 它 web service 的 能 力 ， 使 得 使 用 者 不 需要 学 习 每 个 service 的 API 。 

当 所 有 的 六 个 视频 都 被 选中 后 ， 将 会 向 服务 端 发 起 六 个 独立 的 像 这 样 的 YQL 请 求 : 

select * from music.video.id where ids IN ("2158073") 

代理 对 象 


前 面 的 代码 工作 得 很 正常 ， 但 我 们 可 以 让 它 工 作 得 更 好 。proxy 对 象 就 在 这 样 的 场景 中 出 现 ， 
并 接管 了 http 和 videos 对 象 之 间 的 通讯 。 它 将 使 用 一 个 简单 的 逻辑 来 尝试 合并 请 求 : 50ms 的 
延迟 。Videos 对 象 并 不 直接 调用 后 人 台 接 口 ， 而 是 调用 proxy 对 象 的 方法 。proxy 对 象 在 转发 这 个 
请 求 前 将 会 等 待 一 段 时 间 ， 如 果 在 等 待 的 50ms 内 有 另 一 个 来 自 videos 的 调用 ， 则 它们 将 被 合 


并 为 同一 个 请 求 。50ms 的 延迟 对 用 户 来 说 几乎 是 无 感知 的 ， 但 是 却 可 以 用 来 合并 请 求 以 提升 
点 击 "toggle" 时 的 体验 ， 一 次 展开 多 个 视频 。 它 也 可 以 显著 降低 服务 器 的 负载 ， 因 为 web 服 务 
器 只 需要 处 理 更 少量 的 请 求 。 


合并 后 查询 两 个 视频 信息 的 YQL 大 概 是 这 样 : 
select * from music.video.id where ids IN ("2158073", "123456") 
在 修改 后 的 代码 中 ， 唯 一 的 变化 是 videos.getlnfo() 现 在 调用 的 是 proxy.makeRequest() 而 不 是 
http.makeRequest()， 像 这 样 : 
proxy.makeRequest(id, videos.updateList, videos); 
proxy 对 象 创 建 了 一 个 队列 来 收集 50ms 之 内 接受 到 的 视频 ID， 然 后 将 这 个 队列 传递 给 http 对 


象 ， 并 提供 回调 函数 ， 因 为 videos.updateList() 只 能 处 理 一 次 接收 到 的 数据 。 (译注 : 指 每 次 
传 入 的 回调 函数 只 能 处 理 当 次 接收 到 的 数据 。) 


下 面 是 proxy 对 象 的 代码 : 


var proxy = { 

ids: [], 

delay: 50, 

timeout: null, 

callback: null, 

context: null, 

makeRequest: function (id, callback, context) { 
// add to the queue 
this.ids.push(id); 


this.callback 
this.context 


= callback; 
= context; 
// set up timeout 
if (!this.timeout) { 
this.timeout = setTimeout(function () { 
proxy.flush(); 
}, this.delay); 


} 
}, 
flush: function () { 
http.makeRequest(this.ids, "proxy.handler"); 
// clear timeout and queue 
this.timeout = null; 
this.ids = []; 
}, 
handler: function (data) { 


var i, max; 


// single video 


if (parseInt(data.query.count, 10) === 1) { 
proxy.callback.call(proxy.context, data.query.results.Video) ; 
return; 

} 


// multiple videos 

for (i = 0, max = data.query.results.Video.length; i < max; i += 1) { 
proxy.callback.call(proxy.context, data.query.results.Video[i]); 

} 


ten 


了 解 代 理 模式 后 就 在 只 简单 地 改动 一 下 原来 的 代码 的 情况 下 ， 将 多 个 web service 请 求 合 并 为 


一 个 。 


图 7-4 和 7-5 展 示 了 使 用 代理 模式 将 与 服务 器 三 次 数据 交互 (不 用 代理 模式 时 ) 变 为 一 次 交互 的 
过 程 。 
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图 7-4 与 服 


图 7-5 通过 一 个 代理 对 象 合并 请 求 ， 减 少 与 服务 器 数据 交互 


使 用 代理 对 象 做 缓存 


在 这 个 例子 中 ， 客 户 对 象 (videos) 已 经 可 以 做 到 不 对 同一 个 对 象 重 复发 出 请 求 。 但 现实 情况 
中 并 不 总 是 这 样 。 这 个 代理 对 象 还 可 以 通过 缓存 之 前 的 请 求 结果 到 cache 属 性 中 来 进一步 保护 
站 正 的 主体 http 对 象 (图 7-6) 。 然 后 当 videos 对 象 需要 对 同一 个 ID 的 视频 请 求 第 二 次 时 ， 
proxy 对 象 可 以 直接 从 缓存 中 取出 ， 从 而 避免 一 次 网 络 交互 。 


图 7-6 代理 缓存 


中 介 者 模式 


一 个 应 用 不 论 大 小 ， 都 是 由 一 些 彼 此 独立 的 对 象 组 成 的 。 所 有 的 对 象 都 需要 一 个 通讯 的 方式 
来 保持 可 维护 性 ， 即 你 可 以 安全 地 修改 应 用 的 一 部 分 而 不 破坏 其 它 部 分 。 随 着 应 用 的 开发 和 
维护 ， 会 有 越 来 越 多 的 对 象 。 然 后 ， 在 重 构 代码 的 时 候 ， 对 象 可 能 会 被 移 除 或 者 被 重新 安 
排 。 当 对 象 知道 其 它 对 象 的 太 多 信息 并 且 直 接 通讯 (直接 调用 彼此 的 方法 或 者 修改 属性 ) 

时 ， 会 导致 我 们 不 愿意 看 到 的 紧 厅 合 。 当 对 银 辜 合 很 紧 时 ， 要 修改 一 个 对 象 而 不 影响 其 它 的 
对 象 是 很 困难 的 。 此 时 其 至 连 一 个 最 简单 的 修改 都 变 得 不 那么 容易 ， 共 至 连 一 个 修改 需要 用 
多 长 时 间 都 难以 评估 。 


中 介 者 模式 就 是 一 个 缓解 此 问题 的 办 法 ， 它 通过 解 耦 来 提升 代码 的 可 维护 性 ( 见 图 7-7) 。 在 
这 个 模式 中 ， 各 个 彼此 合作 的 对 象 并 不 直接 通讯 ， 而 是 通过 一 个 mediator (中 介 者 ) 对 象 通 
讯 。 当 一 个 对 象 改变 了 状态 后 ， 它 就 通知 中 介 者 ， 然 后 中 介 者 再 将 这 个 改变 告知 给 其 它 应 该 
知道 这 个 变化 的 对 象 。 


图 7-7 中 介 者 模式 中 的 对 象 关 系 


中 介 者 示例 


我 们 来 看 一 个 使 用 中 介 者 模式 的 实例 。 这 个 应 用 是 一 个 游戏 ， 它 的 玩法 是 比较 两 位 游戏 者 在 
半分 钟 内 按 下 按键 的 次 数 ， 次 数 多 的 获胜 。 玩 家 1 需要 按 的 是 1， 玩 家 2 需要 按 的 是 0 (这 样 他 
们 的 手指 不 会 搅 在 一 起 ) 。 当 前 分 数 会 显示 在 一 个 计 分 板 上 。 


对 象 列表 如 下 : 


e Player 1 
e Player 2 
e Scoreboard 
e Mediator 


中 介 者 Mediator 知 道 所 有 的 对 象 。 它 与 输入 设备 〈 键 盘 ) 打交道 ， 处 理 keypress 事 件 ， 决 定 现 


在 是 哪 位 玩家 玩 的 ， 然 后 通知 这 个 玩家 ( 见 图 7-8) 。 玩 家 负责 玩 ( 即 给 自己 的 分 数 加 一 
T) ， 然 后 通知 中 介 者 他 这 一 轮 已 经 玩 完 。 中 介 者 再 告知 计 分 板 最 新 的 分 数 ， 计 分 板 更 新 显 


T o 


除了 中 介 者 之 外 ， 其 它 的 对 象 都 不 知道 有 别 的 对 象 存在 。 这 样 就 使 得 更 新 这 个 游戏 变 得 很 简 
单 ， 比 如 要 添加 一 位 玩家 或 者 是 添加 另外 一 个 显示 剩余 时 间 的 地 方 。 


你 可 以 在 这 里 看 到 这 个 游戏 的 在 线 演示 http://jspatterns.com/book/7/mediator.html ° 


图 7-8 游戏 涉及 的 对 象 


玩家 对 痊 是 通过 Player() 构 造 吕 数 来 创建 的 ， 有 自己 的 points 和 name 属 性 。 原 型 上 的 play() 方 
法 负责 给 自己 加 一 分 然后 通知 中 介 者 : 


function Player(name) { 
this.points = 0; 
this.name = name; 


} 

Player.prototype.play = function () { 
this.points += 1; 
mediator .played(); 

}; 


scoreboard 对 象 ( 计 分 板 ) 有 一 个 update() 方 法 ， 它 会 在 每 次 玩家 玩 完 后 被 中 介 者 调用 。 计 分 
析 根 本 不 知道 玩家 的 任何 信息 ， 也 不 保存 分 数 ， 它 只 负责 显示 中 介 者 给 过 来 的 分 数 : 


var scoreboard = { 


// HTML element to be updated 
element: document.getElementById('results'), 


// update the score display 
update: function (score) { 


var i, msg = ''; 
for (i in score) { 


if (score.hasOwnProperty(i)) { 
msg += '<p><strong>' + i + '<\/strong>: '; 
msg += score[i]; 
msg += '<\/p>'; 


i 


this.element.innerHTML = msg; 


} 
}; 


现在 我 们 来 看 一 下 mediator 对 象 (中介 者 ) 。 在 游戏 初始 化 的 时 候 ， 在 setup() 方 法 中 创建 游 
戏 者 ， 然 后 放 后 players 属 性 以 便 后 续 使 用 。played() 方 法 会 被 游戏 者 在 每 轮 玩 完 后 调用 ， 它 更 
新 Score 哈 希 然 表 然后 将 它 传 给 scoreboard 用 于 显示 。 最 后 一 个 方法 是 keypress()， 负 责 处 理 
键盘 事件 ， 决 定 是 哪 位 玩家 玩 的 ， 并 且 通 知 它 : 


var mediator = { 


// all the players 
players: {}, 


// initialization 

setup: function () { 
var players = this.players; 
players.home = new Player('Home'); 
players.guest = new Player('Guest'); 


}, 


// someone plays, update the score 
played: function () { 
var players = this.players, 
score = { 
Home: players.home.points, 
Guest: players.guest.points 


}; 


scoreboard.update(score); 


}, 


// handle user interactions 
keypress: function (e) { 


e = e || window.event; // IE 

if (e.which === 49) { // key "1" 
mediator .players.home.play(); 
return; 

} 

if (e.which === 48) { // key "0" 
mediator .players.guest.play(); 
return; 

} 


}; 


最 后 一 件 事 是 初始 化 和 结束 游戏 : 


// go! 
mediator.setup(); 
window.onkeypress = mediator.keypress; 


// game over in 30 seconds 

setTimeout(function () { 
window.onkeypress = null; 
alert('Game over!'); 

}, 30000); 


观察 者 模式 被 广泛 地 应 用 于 JavaScript 客 户 端 编程 中 。 所 有 的 浏览 器 事件 (mouseover ° 
keypress 等 ) 都 是 使 用 观察 者 模式 的 例子 。 这 种 模式 的 另 一 个 名 字 叫 “ 自 定义 事件 ”"， 意 思 是 这 
些 事件 是 被 编写 出 来 的 ， 和 浏览 器 触发 的 事件 相对 。 它 还 有 另外 一 个 名 字 叫 “订阅 者 /发 布 

者 "模式 。 


使 用 这 个 模式 的 最 主要 目的 就 是 促进 代码 触 解 辜 。 在 观察 者 模式 中 ， 一 个 对 象 订阅 另 一 个 对 
象 的 指定 活动 并 得 到 通知 ， 而 不 是 调用 另 一 个 对 象 的 方法 。 订 阅 者 也 被 叫 作 观察 者 ， 被 观察 
的 对 象 叫 作 发 布 者 或 者 被 观察 者 (译注 : subject， 不 知道 如 何 翻 译 ， 第 一 次 的 时 候 译 为 “ 主 
体 ”， 第 二 次 译 时 觉得 不 受 ， 还 S 。 当 一 个 特定 的 事件 发 生 的 时 候 ， 发 
布 者 会 通知 (调用) 所 有 的 订阅 者 ， 同 时 还 可 能 以 事件 对 象 的 形式 传递 一 些 消 息 。 


例 1 : 杂志 订阅 


为 了 理解 观察 者 模式 的 实现 方式 ， 我 们 来 看 一 个 具体 的 例子 。 我 们 假设 有 一 个 发 布 者 paper ，; 
它 发 行 一 份 日 报 和 一 份 月 刊 。 无 论 是 日 报 还 是 月 刊 发 行 ， 有 一 个 名 叫 joe 的 订阅 者 都 会 收 到 通 
知 。 


paper 对 象 有 一 个 subscribers 属 性 ， 它 是 一 个 数组 ， 用 来 保存 所 有 的 订阅 者 。 订 阅 的 过 程 就 仅 
仅 是 将 订阅 者 放 到 这 个 数组 中 而 已 。 当 一 个 事件 发 生 时 ，paper 遍 历 这 个 订阅 者 列表 ， 然 后 通 
知 它们 。 通 知 的 意思 也 就 是 调用 订阅 者 对 象 的 一 个 方法 。 因 此 ， 在 订阅 过 程 中 ， 订 阅 者 需要 
ek cs % 8) subscribe() ° 


paper 对 象 也 可 以 提供 unsubscribe() 方 法 ， 它 可 以 将 订阅 者 从 数组 中 移 除 。paper 对 象 的 最 后 
一 个 重要 的 方法 是 publish()， 它 负责 调用 订阅 者 的 方法 。 总 结 一 下 ， 一 个 发 布 者 对 象 需要 有 这 
He : 


e subscribers 
一 个 数组 
e subscribe() 
将 订阅 者 加 入 数组 
e unsubscribe() 
从 数组 中 移 除 订阅 者 
e publish() 
遍历 订阅 者 并 调用 它们 订阅 时 提供 的 方法 


所 有 三 个 方法 都 需要 一 个 type 参 数 ， 因 为 一 个 发 布 者 可 能 触发 好 几 种 事件 (比如 同时 发 布 杂志 
和 报纸 ) ， 而 订阅 者 可 以 选择 性 地 订阅 其 中 的 一 种 或 几 种 。 


a 是 通用 的 ， 因 此 将 它们 作为 独立 对 象 的 一 部 分 提取 出 来 是 有 
意义 的 。 然 后 ， 我 们 可 以 (通过 混 元 模式 ) 将 它们 复制 到 任何 一 个 对 象 中 ， 将 这 些 对 象 转换 
为 订阅 者 。 


下 面 是 这 些 发 布 者 通用 功能 的 一 个 示例 实现 ， 它 定义 了 上 面 列 出 来 的 所 有 成 员 ， 还 有 一 个 畏 
助 的 visitSubscribers() 方 法 : 


Var 


}; 


下 面 这 个 函数 接受 一 个 对 象 作 为 参数 ， 并 通过 复制 通用 的 发 布 者 的 方法 将 这 个 对 象 墨 迹 


布 者 : 


publisher = { 
subscribers: { 
any: [] // event type: subscribers 


subscribe: function (fn, type) { 
type = type || ‘any'; 
if (typeof this.subscribers[type] === "undefined") { 
this.subscribers[type] = []; 


this.subscribers[type].push(fn); 
}, 
unsubscribe: function (fn, type) { 
this.visitSubscribers('unsubscribe', fn, type); 
}, 
publish: function (publication, type) { 
this.visitSubscribers('publish', publication, type); 
}, 
visitSubscribers: function (action, arg, type) { 
var pubtype = type || ‘any', 
subscribers = this.subscribers[pubtype], 
i, 
max = subscribers.length; 


for (i = 0; i < max; i += 1) { 
if (action === 'publish') { 
subscribers[i](arg); 
} else { 
if (subscribers[i] === arg) { 
subscribers.splice(i, 1); 
} 


function makePublisher(o) { 


现在 我 们 来 实现 paper 对 象 ， 它 能 做 的 事情 就 是 发 布 日 报 和 月 刊 : 


Var 


}; 


var i; 
for (i in publisher) { 


if (publisher.hasOwnProperty(i) && typeof publisher[i] === "function") { 


o[i] = publisher[i]; 
} 
} 


o.subscribers = {any: []}; 


paper = { 
daily: function () { 
this.publish("big news today"); 
}, 
monthly: function () { 
this.publish("interesting analysis", "monthly"); 
} 


将 paper 对 象 变 成 发 布 者 : 


Bx 


成 发 


makePublisher (paper); 


现在 我 们 有 了 一 个 发 布 者 ， 让 我 们 再 来 看 一 下 订阅 者 对 象 joe， 它 有 两 个 方法 : 


var joe = { 
drinkCoffee: function (paper) { 
console.log('Just read ' + paper); 
}, 


sundayPreNap: function (monthly) { 
console.log('About to fall asleep reading this ' + monthly); 
} 


}; 


现在 让 joe 来 订阅 paper : 


paper .subscribe(joe.drinkCoffee) ; 
paper.subscribe(joe.sundayPreNap, 'monthly'); 


如 你 所 见 ，joe 提 供 了 一 个 当 默 认 的 any 事 件 发 生 时 被 调用 的 方法 ， 还 提供 了 另 一 个 妆 monthly 
事件 发 生 时 被 调用 的 方法 。 现 在 让 我 们 来 触发 一 些 事件 : 


paper .daily(); 
paper .daily(); 
paper .daily(); 
paper .monthly(); 


这 些 发 布 行为 都 会 调用 joe 的 对 应 方法 ， 控 制 台中 输出 的 结果 是 : 


Just read big news today 
Just read big news today 
Just read big news today 
About to fall asleep reading this interesting analysis 


这 里 值得 称道 的 地 方 就 是 paper 对 象 并 没有 硬 编码 写 上 joe， 而 joe 也 同样 没有 硬 编 码 写 上 
paper。 这 里 也 没有 知道 所 有 事情 的 中 介 者 对 象 。 所 有 涉及 到 的 对 象 都 是 松 耦 合 的 ， 而 且 在 不 
修改 代码 的 前 提 下 ， 我 们 可 以 给 paper 添 加 更 多 的 订阅 者 ， 同 时 joe 也 可 以 在 任何 时 候 取消 订 
阅 。 


让 我 们 更 进一步 ， 将 joe 也 变 成 一 个 发 布 者 。 (毕竟 ， 在 博客 和 微 博 上 ， 任 何人 都 可 以 是 发 布 
者 。) 这 样 ，joe 变 成 发 布 者 之 后 就 可 以 在 Twitter 上 更 新 状态 : 

makePublisher(joe); 

joe.tweet = function (msg) { 


this.publish(msg); 
3; 


现在 假设 paper 的 公关 部 门 准备 通过 Twitter 收集 读者 反馈 ， 于 是 它 订 阅 了 joe， 提 供 了 一 个 方法 
readTweets() : 


paper.readTweets = function (tweet) { 
alert('Call big meeting! Someone ' + tweet); 
}; 


joe.subscribe(paper.readTweets) ; 


这 样 每 当 joe 发 出 消息 时 ，paper 就 会 弹出 警告 窗口 : 


joe.tweet("hated the paper today"); 


结果 是 一 个 警告 窗口 : “Call big meeting! Someone hated the paper today” ° 


你 可 以 在 http://jspatterns.com/book/7/observer.html 看 到 完整 的 源 代码 ， 并 且 在 控制 台中 运行 
这 个 实例 。 


例 2 : 按键 游戏 


我 们 来 看 另 一 个 例子 。 我 们 将 实现 一 个 和 中 介 者 模式 的 示例 一 样 的 按钮 游戏 ， 但 这 次 使 用 观 
察 者 模式 。 为 了 让 它 看 起 来 更 高 档 ， 我 们 允许 接受 无 限 个 玩家 ， 而 不 限于 2 个 。 我 们 仍然 保留 
用 来 产生 玩家 的 Player() 构 造 函 数 ， 也 保留 scoreboard 对 象 。 只 有 mediator 会 交 成 game 对 象 。 


在 中 介 者 模式 中 ，mediator 对 象 知道 所 有 涉及 到 的 对 象 ， 并 且 调用 它们 的 方法 。 而 观察 者 模式 
中 的 game 对 象 不 是 这 样 ， 它 会 让 对 象 来 订阅 它们 感 兴趣 的 事件 。 比 如 ，scoreboard 会 订阅 
game 对 象 的 scorechange 事 件 。 


首先 我 们 重新 看 一 下 通用 的 publisher 对 象 ， 并 且 将 它 的 接口 做 一 点 小 修改 以 更 贴近 浏览 器 的 
情况 : 
e 将 publish()，subscribe()，unsubscribe() 分 别 改 为 fre()，on()，remove() 
e 事件 的 type 每 次 都 会 被 用 到 ， 所 以 把 它 变 成 三 个 方法 的 第 一 个 参数 
e 可 以 给 订阅 者 的 方法 额外 加 一 个 context 参 数 ， 以 便 回 调 方法 可 以 用 this 指 向 它 自己 所 属 的 
对 象 


新 的 publisher 对 象 是 这 样 : 


var publisher = { 
subscribers: { 


any: [] 
}, 
on: function (type, fn, context) { 
type = type || ‘any’; 
fn = typeof fn === "function" ? fn : context[fn]; 
if (typeof this.subscribers[type] === "undefined") { 
this.subscribers[type] = []; 
this.subscribers[type].push({fn: fn, context: context || this}); 
}, 


remove: function (type, fn, context) { 
this.visitSubscribers('unsubscribe', type, fn, context); 
}, 
fire: function (type, publication) { 
this.visitSubscribers('publish', type, publication); 
}, 
visitSubscribers: function (action, type, arg, context) { 
var pubtype = type || ‘any', 
subscribers = this.subscribers[pubtype], 
i, 
max = subscribers ? subscribers.length : 0; 


for (i = 0; i < max; i += 1) { 
if (action === 'publish') { 
subscribers[i].fn.call(subscribers[i].context, arg); 
} else { 
if (subscribers[i].fn === arg && subscribers[i].context === context) { 
subscribers.splice(i, 1); 
} 


Ww 


}; 


新 的 Player() 构 造 函 数 是 这 样 : 


function Player(name, key) { 
this.points = 0; 
this.name = name; 
this.key = key; 
this.fire('newplayer', this); 

} 

Player.prototype.play = function () { 
this.points += 1; 
this.fire('play', this); 

3; 


变动 的 部 分 是 这 个 构造 函数 接受 key， 代 表 这 个 玩家 在 键盘 上 用 来 按 之 后 得 分 的 按键 。 (这 些 
键 预先 被 硬 编码 过 。) 每 次 创建 一 个 新 玩家 的 时 候 ， 一 个 newplayer 事 件 也 会 被 触发 。 类 似 
的 ， 每 次 有 一 个 玩家 玩 的 时 候 ， 会 触发 play 事 件 。 


Scoreboard 对 象 和 原来 一 样 ， 它 只 是 简单 地 将 当前 分 数 显 示 出 来 。 


game 对 象 会 关注 所 有 的 玩家 ， 这 样 它 就 可 以 给 出 分 数 并 且 触 发 Scorechange 事 件 。 它 也 会 订 
阅 浏览 吕 中 所 有 的 keypress 事 件 ， 这 样 它 就 会 知道 按钮 对 应 的 玩家 : 


var game = { 


keys: {}, 


addPlayer: function (player) { 
var key = player.key.toString().charCodeAt(@); 
this. keys[key] = player; 


}, 
handleKeypress: function (e) { 
e = e || window.event; // IE 
if (game.keys[e.which]) { 
game .keys[e.which].play(); 
} 
}, 


handlePlay: function (player) { 
var i, 
players = this.keys, 
score = {}; 


for (i in players) { 
if (players.hasOwnProperty(i)) { 
score[players[i].name] = players[i].points; 
} 


this.fire('scorechange', score); 


} 


用 于 将 任意 对 象 转变 为 订阅 者 的 makePublisher() 还 是 和 之 前 一 样 。game 对 象 会 变 成 发 布 者 
(这 样 它 才 可 以 触发 scorechange 事 件 ) ，Player.prototype 也 会 变 成 发 布 者 ， 以 使 得 每 个 玩 
家 对 象 可 以 触发 play 和 newplayer 事 件 : 


makePublisher(Player.prototype); 
makePublisher (game) ; 


We Be 


game 对 象 订 阅 play 和 newplayer 事 件 〈 以 及 浏览 器 的 keypress 事 件 ) ，scoreboard 订 阅 
scorechange 事 件 : 


Player.prototype.on("newplayer", "addPlayer", game); 
Player.prototype.on("play", "handlePlay", game); 
game.on("scorechange", scoreboard.update, scoreboard); 
window.onkeypress = game.handleKeypress; 


如 你 所 见 ，on() 方 法 允许 订阅 者 通过 函数 (scoreboard.update) RA F4 # 
("addPlayer") 来 指定 回调 函数 。 当 有 提供 context (如 game) 时 ， 才 能 通过 字符 串 来 指定 回 
PETE 


初始 化 的 最 后 一 点 工作 就 是 动态 地 创建 玩家 对 象 ( 以 及 它们 对 象 的 按键 ) ， 用 户 想 要 多 少 个 
就 可 以 创建 多 少 个 : 


var playername, key; 
while (1) { 
playername = prompt("Add player (name)"); 
if (!playername) { 
break; 


} 
while (1) { 
key = prompt("Key for " + playername + "?"); 


if (key) { 
break; 
} 


new Player(playername, key); 


这 就 是 游戏 的 全 部 。 你 可 以 在 <http:Wispatterns .com/book/7/observer-game.html> 看 到 完整 的 
源 代码 并 且 试 玩 一 下 。 


值得 注意 的 是 ， 在 中 介 者 模式 中 ，mediator 对 象 必 须知 道 所 有 的 对 象 ， 然 后 在 适当 的 时 机 去 调 
用 对 应 的 方法 。 而 这 个 例子 中 ，game 对 象 会 显得 策 一 些 (译注 : 指 知道 的 信息 少 一 些 ) ， 游 
戏 依赖 于 对 象 去 观察 特写 的 事件 然后 触发 相应 的 动作 : 如 Scoreboard 观 察 scorechange 事 件 。 

使 得 对 象 之 间 的 耦合 更 松 了 (对 象 间 知道 彼此 的 信息 越 少 越 好 ) ， 而 代价 则 是 弄 清 事件 和 
订阅 者 之 间 的 对 应 关系 会 更 困难 一 些 。 在 这 个 例子 中 ， 所 有 的 订阅 行为 都 发 生 在 代码 中 的 同 
一 个 地 方 ， 而 随 着 应 用 规模 的 境 长 ，on() 可 能 会 被 在 各 个 地 方 调 用 (如 在 每 个 对 象 的 初始 化 代 
码 中 ) 。 这 使 得 调试 更 困难 一 些 ， 因 为 没有 一 个 集中 的 地 方 来 看 这 些 代码 并 理解 正在 发 生 什 
么 事情 。 在 观察 者 模式 中 ， 你 将 不 再 能 看 到 那 种 从 开头 一 直 跟 到 结尾 的 顺序 执行 方式 。 


在 这 章 中 你 学 习 到 了 若干 种 流行 的 设计 模式 ， 并 且 也 知道 了 如 何在 JavaScript 中 实现 它们 。 我 
们 讨论 过 的 设计 模式 有 : 


e. 单 例 模式 


只 创建 类 的 唯一 一 个 实例 。 我 们 看 了 好 几 种 可 以 不 通过 构造 泡 数 和 类 Java 语 法 达成 单 例 
的 方法 。 从 另 一 方面 来 说 ，JavaScript 中 所 有 的 对 象 都 是 单 例 。 有 时 候 开 发 者 说 的 单 例 是 
指 通过 模块 化 模式 创建 的 对 象 。 


e 工厂 模式 
一 种 在 运行 时 通过 指定 字符 串 来 创建 指定 类 型 对 象 的 方法 。 
© 遍历 模式 


通过 提供 API 来 实现 复杂 的 自 定 义 数据 结构 中 的 遍历 和 导航 。 


在 运行 时 通过 从 预先 定义 好 的 装饰 器 对 象 来 给 被 装饰 对 象 动态 添加 功能 。 


策略 模式 

保持 接口 一 致 的 情况 下 选择 最 好 的 策略 来 完成 特写 类 型 的 任务 。 

外 观 模式 

通过 包装 通用 的 (或 者 设计 得 很 差 的 ) 方法 来 提供 一 个 更 方便 的 API 。 
代理 模式 


包装 一 个 对 象 以 控制 对 它 的 访问 ， 通 过 合并 操作 或 者 是 只 在 黄 正 需要 时 执行 来 尽量 避免 
开销 太 大 的 操作 。 


中 介 者 模式 
通过 让 对 象 不 彼此 沟通 ， 只 通过 一 个 中 介 者 对 象 沟通 的 方法 来 促进 解 耦 。 
观察 者 模式 


通过 创建 “可 被 观察 的 对 象 ”使 它 在 某 个 事件 发 生 时 通知 订阅 者 的 方式 来 解 厅 。 (也 叫 “ 订 
阅 者 /发 布 者 "或 者 " 自 定 义 事件 "。) 


DOM 和 浏览 器 中 的 模式 


在 本 书 的 前 面 几 章 中 ， 我 们 主要 关注 了 JavaScript 核 心 (ECMAScript) ， 并 没有 涉及 大 多 关 
于 在 浏览 器 中 使 用 JavaScript 的 内 容 。 在 本 章 ， 我 们 将 探索 一 些 在 浏览 器 环境 中 的 模式 ， 因 为 
这 是 最 常见 的 JavaScript 程 序 环 境 。 浏 览 器 脚本 编程 也 是 大 部 分 不 喜欢 JavaScript 的 人 对 这 门 
语言 的 认 知 。 这 当然 是 可 以 理解 ， 因 为 在 浏览 器 中 有 非常 多 不 一 致 的 宿主 对 象 和 DOM 实 现 。 
很 明显 ， 任 何 能 够 减轻 客户 端 脚本 编程 的 痛楚 的 最 佳 初 中 都 是 大 有 益处 的 。 

在 本 章 中 ， 你 会 看 到 一 些 零散 的 模式 ， 包 括 DOM 编 程 、 事 件 处 理 、 远 程 脚本 、 页 面 脚本 的 加 
载 策略 以 及 将 JavaScript 部 署 到 生产 环境 的 步骤 。 


但 首先 ， 让 我 们 来 简要 讨论 一 下 如 何 做 客户 端 脚本 编程 。 


sp i 
在 web 应 用 开发 中 主要 关注 的 有 三 种 东西 : 
。 AS 
即 HTML 文 档 
e 表现 
指定 文档 样式 的 CSS 
© 行为 
JavaScript， 用 来 处 理 用 户 交互 和 页 面 的 动态 变化 


尽 可 能 地 将 这 三 者 分 离 可 以 加 强 应 用 在 各 种 用 户 代 理 (译注 : user agent， 即 为 用 户 读 取 页 面 

并 呈现 的 软件 ， 一 般 指 浏览 器 ) 的 可 到 达 性 (译注 : delivery， 指 T ee 
程度 ) ， 比 如 图 形 浏 览 器 、 纯 文本 浏览 器 、 用 于 残障 人 士 的 辅助 技术 、 移 动 设备 等 等 。 分 离 
常常 是 和 渐进 增强 的 思想 一 起 实现 的 ， 我 们 从 一 个 给 最 简单 的 用 户 代 理 的 最 基础 的 体验 ( 纯 
HTML) 开始 ， 当 用 户 代 理 的 兼容 性 提升 时 再 添加 更 多 的 可 以 为 体验 加 分 的 东西 。 如 果 浏 览 器 
支持 CSS， 那 么 用 户 会 看 到 文档 更 好 的 呈现 。 如 果 浏 览 器 支持 JavaScript， 那 文档 会 更 像 一 个 
应 用 ， 提 供 更 多 的 特性 来 增强 用 户 体验 。 


在 实践 中 ， 分 离 意 味 者 : 


e 在 关 掉 CSS 的 情况 下 测试 页 面 ， 看 页 面 是 否 仍 然 可 用 ， 内 容 是 否 可 以 呈现 和 阅读 

e 在 关 掉 JavaScript 的 情况 下 测试 页 面 ， 确 保 页面 仍 然 可 以 完成 它 的 主要 功能 ， 所 有 的 链接 
都 可 以 正常 工作 (没有 href="#" 的 链接 ) ， 表 单 仍然 可 以 正常 填写 和 提交 

。 不 要 使 用 内 联 的 事件 处 理 (如 onclick) 或 者 是 内 联 的 style 属 性， 因为 它们 不 属于 内 容 层 


o 使 用 语义 化 的 HTML 元 素 ， 比 如 头 部 和 列表 等 


JavaScript (行为 ) 层 的 地 位 不 应 该 很 显赫 ， 也 就 是 说 它 不 应 该 成 为 页 面 正 常 工作 必须 的 东 
西 ， 不 应 该 使 得 用 户 在 使 用 不 支持 的 浏览 器 操作 时 存在 障碍 。 它 只 应 该 被 用 来 增强 页 面 。 


通常 比较 优雅 的 用 来 处 理 浏览 器 差异 的 方法 是 特性 检测 。 它 的 思想 是 你 不 应 该 使 用 浏览 器 类 

型 检测 来 决定 代码 的 逻辑 ， 而 是 应 该 检测 在 当前 环境 中 你 需要 使 用 的 某 个 方法 或 者 是 属性 是 

否 存在 。 浏 览 器 检测 一 是 一 种 “ 反 模 式 ” (译注 : anitpattern， 指 不 好 的 模式 ) 。 虽 然 有 

的 情况 下 不 可 避免 要 使 用 ， 但 它 应 该 是 最 后 考虑 的 选择 ， 并 且 应 该 只 在 特性 检测 没有 办 法 给 
ne ie spines 


// antipattern 
if (navigator.userAgent.indexOf('MSIE') !== -1) { 
document.attachEvent('onclick', console.log); 


// better 
if (document.attachEvent) { 
document.attachEvent('onclick', console.log); 


} 

// or even more specific 

if (typeof document.attachEvent !== "undefined") { 
document.attachEvent('onclick', console.log); 

} 


分 离 也 有 助 于 开发 、 维 护 ， 减 少 升级 一 个 现 有 应 用 的 难度 ， 因 为 当 出 现 问题 的 时 候 ， 你 知道 
去 看 哪 一 块 。 当 出 现 一 个 JavaScript 错 误 的 时 候 ， 你 不 需要 去 看 HTML 或 者 是 CSS 就 能 修复 


5 


a o 


DOM 编 程 


操作 页 面 的 DOM 树 是 在 客户 端 JavaScript 编 程 中 最 善 遍 的 动作 。 这 也 是 导致 开发 者 头疼 的 最 
主要 原因 (这 也 导致 了 JavaScript 名 声 不 好 ) ， 因 为 DOM 方 法 在 不 同 的 浏览 器 中 实现 得 有 很 
多 差异 。 这 也 是 为 什么 使 用 一 个 抽象 了 浏览 器 差异 的 JavaScript 库 能 显著 提高 开发 速度 的 原 


我 们 来 看 一 些 在 访问 和 修改 DOM 树 时 推荐 的 模式 ， 主 要 考虑 点 是 性 能 方面 。 
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DOM 操 作 性 能 不 好 ， 这 是 影响 JavaScript 性 能 的 最 主要 原因 。 性 能 不 好 是 因为 浏览 器 的 DOM 
实现 通常 是 和 JavaScript 引 擎 分 离 的 。 从 浏览 器 的 角度 来 讲 ， 这 样 做 是 很 有 意义 的 ， 因 为 有 可 
能 一 个 JavaScript 应 用 根本 不 需要 DOM > 而 除了 JavaScript 之 外 的 其 它 语言 (如 |E 的 
VBScript) 也 可 以 用 来 操作 页 面 中 的 DOM 。 


一 个 原则 就 是 DOM 访 问 的 次 数 应 该 被 减少 到 最 这 意味 者 : 


避免 在 环境 中 访问 DOM 

将 DOM 引 用 赋 给 本 地 变量 ， 然 后 操作 本 地 变量 
当 可 能 的 时 候 使 用 selectors API 

e 遍历 HTML collections 时 缓存 length ( 见 第 2 章 ) 


看 下 面 例子 中 的 第 二 个 (better) 循环 ， 尽 管 它 看 起 来 更 长 一 些 ， 但 却 要 快 上 几 十 上 百倍 (W 
决 于 具体 浏览 器 ) 


// antipattern 
for (var i = 0; i < 100; i += 1) { 

document .getElementById("result") .InnerHTML += i+", "; 
} 


// better - update a local variable var i, content = ""; 
for (i = 0; i < 100; i+= 1) { 

content t= T EuT 
} 


document.getElementById("result").innerHTML += content; 


在 下 一 个 代码 片段 中 ， 第 二 个 例子 〈 使 用 了 本 地 变量 style) 更 好 ， 尽 管 它 需要 多 写 一 行 代 
码 ， 还 需要 多 定义 一 个 变量 : 


// antipattern 
var padding = document.getElementById("result").style.padding, 
margin = document.getElementById("result").style.margin; 


// better 

var style = document.getElementById("result").style, 
padding = style.padding, 
margin = style.margin; 


i$ M selectors API 是 指使 用 这 个 方法 : 


document.querySelector("ul .selected"); 
document. querySelectorAll("#widget .class"); 


这 两 个 方法 接受 一 个 CSS 选 择 器 字符 串 ， 返 回 匹配 这 个 选择 器 的 DOM 列 表 (译注 : 
querySelector 只 返回 第 一 个 匹配 的 DOM ) 。selectors API 在 现代 浏览 器 (以 及 IE8+) 可 用 ， 
它 总 是 会 比 你 使 用 其 它 DOM 方 法 来 做 同样 的 选择 要 快 。 主 流 的 JavaScript 库 的 最 近 版 本 都 已 
经 使 用 了 这 个 API， 所 以 你 有 理由 去 检查 你 的 项 目 ， 确 保 使 用 的 是 最 新 版 本 。 


给 你 经 常 访问 的 元 素 加 上 一 个 id 属性 也 是 有 好 处 的 ， 因 为 document.getElementByld(myid) 是 
找到 一 个 DOM 元 素 最 容易 也 是 最 快 的 方法 。 
DOM 操 作 


除了 访问 DOM 元 素 之 外 ， 你 可 能 经 常 需要 改变 它们 、 删 除 其 中 的 一 些 或 者 是 添加 新 的 元 素 。 
更 新 DOM 会 导致 浏览 器 重 绘 (repaint) 屏幕， 也 经 常 导致 重 排 (reflow) (重新 计算 元 素 的 位 
E) ， 这 些 操作 代价 是 很 高 的 。 


再 说 一 次 ， 通 用 的 原则 仍然 是 尽量 少 地 更 新 DOM， 这 意味 着 我 们 可 以 将 变化 集中 到 一 起 ， 
后 在 “活动 的 ”(live) 文档 树 之 外 去 执行 这 些 变化 。 


当 你 需要 添加 一 棵 相对 较 大 的 子 树 的 时 候 ， 你 应 该 在 完成 这 棵 树 的 构建 之 后 再 放 到 文档 树 
中 。 为 了 达到 这 个 目的 ， 你 可 以 使 用 文档 碎片 document fragment) 来 包含 你 的 节点 


不 要 这 样 添加 节点 


// antipattern 
// appending nodes as they are created 


var p, t; 


p 
t 
p. 
d 


p 
t 
p. 
d 


document.createElement('p'); 
document.createTextNode('first paragraph'); 


appendChild(t); 


ocument.body.appendChild(p); 


document.createElement('p'); 
document .createTextNode('second paragraph'); 


appendChild(t); 


ocument.body.appendChild(p); 


一 个 更 好 的 版 本 是 创建 一 个 文档 碎片 ， 然 后 “离线 地 ” (译注 : 即 不 在 文档 树 中 ) 更 新 它 


准备 好 之 后 再 将 它 加 入 文档 树 中 。 当 你 将 文档 碎片 添加 到 DOM 树 中 时 ， 碎 片 的 内 容 将 会 
加 进去 ， 而 不 是 碎片 本 身 。 这 个 特性 非常 好 用 。 所 以 当 有 好 几 个 没有 被 包 庄 在 同一 


的 节点 时 ， 文 档 碎 片 是 一 个 很 好 的 包 右 方式 。 


下 面 是 使 用 文档 碎片 的 例子 


var p, t, frag; 


frag = document.createDocumentFragment(); 


p 
t 
p. 
f 


p 
t 
p. 
f 


document.createElement('p'); 
document.createTextNode('first paragraph'); 


appendChild(t); 


rag.appendChild(p); 


document.createElement('p'); 
document .createTextNode('second paragraph'); 


appendChild(t); 


rag.appendChild(p); 


document .body.appendChild( frag) ; 


这 个 


ee yee 文档 碎片 很 有 用 。 当 你 需要 更 新 已 有 的 
些 变化 集中 。 你 可 以 将 你 要 修改 的 子 树 的 父 节 点 克隆 一 份 ， 然 后 对 克隆 的 这 份 做 修改 ， 


oe 


然 


被 添 
RAÄ 


例子 和 前 面 例子 中 每 段 更 新 一 次 相 比 ， 文 档 树 只 被 更 新 了 一 下 ， 只 导致 一 次 重 排 / 重 绘 。 


后 再 去 替换 原来 的 元 素 。 


节点 时 ， 你 也 可 以 将 


> 
Iu 


var oldnode = document.getElementById('result'), 
clone = oldnode.cloneNode(true); 


// work with the clone... 


// when you're done: 
oldnode.parentNode.replaceChild(clone, oldnode); 


事件 


在 浏览 器 脚本 编程 中 ， 另 一 块 充满 兼容 性 问题 并 且 带 来 很 多 不 愉快 的 区 域 就 是 浏览 器 事件 ， 
比如 click，mouseover 等 等 。 同 样 的 ， 一 个 JavaScript 库 可 以 解决 支持 IE (9 以 下 ) 和 W3C 标 
准 实现 的 双 倍 工作 量 。 


我 们 来 看 一 下 一 些 主要 的 点 ， 因 为 你 在 做 一 些 简单 的 页 面 或 者 快速 开发 的 时 候 可 能 不 会 使 用 
已 有 的 库 ， 当 然 ， 也 有 可 能 你 正在 写 你 自己 的 库 。 


事件 处 理 


麻烦 是 从 给 元 素 绑 定 事件 开始 的 。 假 设 你 有 一 个 按钮 ， 点 时 候 增加 计数 器 的 值 。 你 可 
以 添加 一 个 内 联 的 onclick 属 性 ， 这 在 所 有 的 浏览 器 中 都 能 正常 工作 ， 但 是 会 违反 分 离 和 渐进 
增强 的 思想 。 所 以 你 应 该 尽力 es 来 做 绑 定 ， on ee o 


假设 你 有 下 面 的 标签 : 


<button id="clickme">Click me: 0</button> 


你 可 以 将 一 个 函数 赋 给 节点 的 onclick 属 性 ， 但 你 只 能 这 样 做 一 次 : 


// suboptimal solution 

var b = document.getElementById('clickme'), 
count = 0; 

b.onclick = function () { 
count += 1; 
b.innerHTML = "Click me: " + count; 


}; 


如 果 你 希望 在 按钮 点 击 的 时 候 执行 好 几 个 函数 ， 那 么 在 维持 松 耦 合 的 情况 下 就 不 能 用 这 种 方 
法 来 做 绑 定 。 从 技术 上 讲 ， 你 可 以 检测 onclick 是 否 已 经 包含 一 个 函数 ， 如 果 已 经 包含 ， 就 将 
它 加 到 你 自己 的 函数 中 ， 然 后 人 但 是 一 个 更 干净 的 解决 方案 是 
使 用 addEventListener() 方 法 。 这 个 方法 在 IE8 及 以 下 版 本 中 不 存在 ， 在 这 些 浏览 器 需要 使 用 
attachEvent() ° 


当 我 们 回头 看 条 件 初 始 化 模式 (第 4 章 ) 时 ， 会 发 现 一 个 示例 实现 是 一 个 很 好 的 解决 跨 浏览 器 
事件 监听 的 套件 。 现 在 我 们 不 讨论 细节 ， 只 看 一 下 如 何 给 我 们 的 按钮 绑 定 事件 : 


var b = document.getElementById('clickme'); 

if (document.addEventListener) { // W3C 
b.addEventListener('click', myHandler, false); 

} else if (document.attachEvent) { // IE 
b.attachEvent('onclick', myHandler); 

} else { // last resort 
b.onclick = myHandler; 

} 


现在 当 按 钮 被 点 击 时 ，myHandler 会 被 执行 。 让 我 们 来 让 这 个 函数 实现 增加 按钮 文字 “Click 
me: 0" 中 的 数字 的 功能 。 为 了 更 有 趣 一 点 ， 我 们 假设 有 好 几 个 按钮 ， 一 个 myHandler() 有 函数 来 
处 理 所 有 的 按钮 点 击 。 如 果 我 们 可 以 从 每 次 点 击 的 事件 对 象 中 获取 节点 和 节点 对 应 的 计数 器 
值 ， 那 为 每 个 按钮 保持 一 个 引用 和 计数 器 就 显得 不 高 效 了 。 


我 们 先 看 一 下 解决 方案 ， 稍 后 再 来 做 些 评论 : 


function myHandler(e) { 
var src, parts; 
// get event and source element 
e = e || window.event; 


src = e.target || e.srcElement; 


// actual work: update label 


parts = src.innerHTML.split(": "); 
parts[1] = parseInt(parts[1], 10) + 1; 
src.innerHTML = parts[0] + ": " + parts[1]; 


// no bubble 
if (typeof e.stopPropagation === "function") { 
e.stopPropagation(); 


} 

if (typeof e.cancelBubble !== "undefined") { 
e.cancelBubble = true; 

} 

// prevent default action 

if (typeof e.preventDefault === "function") { 
e.preventDefault(); 

if (typeof e.returnValue !== "undefined") { 
e.returnValue = false; 

} 


一 个 在 线 的 例子 可 以 在 http:Wjspatterns.com/book/8/click.html 找 到 。 
在 这 个 事件 处 理 函 数 中 ， 有 四 个 部 分 : 


e 首先 ， 我 们 需要 访问 事件 对 象 ， 它 包含 事件 的 一 些 信息 以 及 触发 这 个 事件 的 页 面 元 素 。 
事件 对 象 会 被 传 到 事件 处 理 回调 函数 中 ， 但 是 使 用 onclick 属 性 时 需要 使 用 全 局 属性 
Window.event 来 获取 。 

。 第 二 部 分 是 真正 用 于 更 新 文字 的 部 分 

© 接 下 来 是 阻止 事件 冒 泡 。 在 这 个 例子 中 它 不 是 必须 的 ， 但 通常 情况 下 ， 如 果 你 不 阻止 的 
话 ， 事 件 会 一 直 冒 泡 到 文档 根 元 素 甚 至 Window 对 象 。 同 样 的 ， 我 们 也 需要 用 两 种 方法 来 


阻止 冒 泡 : W3C 标 准 方式 (stopPropagation()) 和 IE 的 方式 (使 用 cancelBubble) 

。 最 后 ， 如 果 需 要 的 话 ， 阻 止 默 认 行 为 。 有 一 些 事 件 (点 击 链 接 、 提 交 表 单 ) 有 默认 的 行 
为 ， 但 你 可 以 使 用 preventDefault() (IE 是 通过 设置 returnValue 的 值 为 false 的 方式 ) 来 阻 
止 这 些 上 默认 行为 。 


如 你 所 见 ， 这 里 涉及 到 了 很 多 重复 性 的 工作 ， 所 以 使 用 第 7 章 讨 论 过 的 外 观 模 式 创建 自己 的 事 
件 处 理 套件 是 很 有 意义 的 。 


事件 委托 


事件 委托 是 通过 事件 冒 泡 来 实现 的 ， 它 可 以 减少 分 散 到 各 个 节点 上 的 事件 处 理 函 数 的 数量 。 
如 果 有 10 个 按钮 在 一 个 div 元 素 中 ， 你 可 以 给 div 绑 定 一 个 事件 处 理 函 数 ， 而 不 是 给 每 个 按钮 都 
绑 定 一 个 。 


我 们 来 的 睦 一 个 实例 ， 三 个 按钮 放 在 一 个 div 元 素 中 (图 8-1) 。 你 可 以 
在 http:Wjspatterns.com/book/8/click-delegate.html 看 到 这 个 事件 委托 的 实例 。 


图 8-1 事件 委托 示例 : 三 个 在 点 击 时 增加 计数 器 值 的 按钮 
结构 是 这 样 的 : 


<div id="click-wrap"> 
<button>Click me: 0</button> 
<button>Click me too: 0</button> 
<button>Click me three: 0</button> 
</div> 


AR OT VALS OL R ikha div LN BH ADE BR REAR AB EHS o RGN AT VAR 
用 和 前 面 的 示例 中 一 样 的 myHandler() 函 数 ， 但 需要 修改 一 个 小 地 方 : 你 需要 将 你 不 感 兴趣 的 
点 击 排除 掉 。 在 这 个 例子 中 ， 你 只 关注 按钮 上 的 点 击 ， 而 在 同一 个 div 中 产生 的 其 它 的 点 击 应 
该 被 忽略 掉 。 


myHandler() 的 改变 就 是 检查 事件 来 源 的 nodeName 有 是 不 是 “button”: 


UU ans 

// get event and source element 

e = e || window.event; 

src = e.target || e.srcElement; 

if (src.nodeName.toLowerCase() !== "button") { 
return; 

} 

YW ano 


Alinta 选 容器 中 感 兴趣 的 事件 使 得 代码 看 起 来 更 多 了 ， 但 好 处 是 性 能 的 提升 和 
更 干净 的 代码 ， 这 个 好 处 明显 大 于 坏处 ， 因 此 这 是 一 种 强烈 推荐 的 模式 。 


主流 的 JavaScript 库 通过 提供 方便 的 API 的 方式 使 得 使 用 Www 。 比 如 YUI3 中 有 
Y.delegate() 方 法 ， 它 允许 你 指定 一 个 用 来 匹配 包裹 容 器 的 CSS 选 择 器 和 一 个 用 于 匹配 你 感 关 
趣 的 节点 的 CSS 选 择 器 。 这 很 方便 ， oo ， 你 的 事件 处 
理 回 调 函数 不 会 被 调用 。 在 这 种 情况 下 ， 绑 定 一 个 事件 处 理 函 数 很 简单 : 


Y.delegate('click', myHandler, "#click-wrap", "button"); 


感谢 YUI 抽 象 了 浏览 器 的 差异 ， 已 经 处 理 好 了 事件 的 来 源 ， 使 得 回调 函数 更 简单 了 : 


function myHandler(e) { 


var sre = e.currentTarget, 


parts; 
parts = src.get('innerHTML').split(": "); 
parts[1] = parseInt(parts[1], 10) + 1; 
src.set('innerHTML', parts[0] + ": " + parts[1]); 
e.halt(); 


你 可 以 在 http://jspatterns.com/book/8/click-y-delegate.html 看 到 实例 。 


长 时 间 运 行 的 脚本 
你 可 能 注意 到 过 ， 有 时 候 浏览 器 会 提示 脚本 运行 时 间 过 长 ， 询 问 用 户 是 否 要 停止 执行 。 这 种 
情况 你 当然 不 希望 发 生 在 自己 的 应 用 中 ， 不 管 它 有 多 复杂 。 


同时 ， 如 果 脚 本 运行 时 间 太 长 的 话 ， 浏 览 器 的 UlI 将 变 得 没有 响应 ， 用 户 不 能 点 击 任何 东西 。 
这 是 一 种 很 差 的 用 户 体 验 ， 应 该 尽量 避免 。 


在 JavaScript 中 没有 线程 ， 但 你 可 以 在 浏览 器 中 使 用 setTimeout 来 模拟 ， 或 者 在 现代 浏览 器 中 


使 用 web workers ° 


setTimeout() 


的 思想 是 将 一 大 扒 工 作 分 解 成 为 一 小 段 一 小 段 ， 然 后 每 隔 1 毫秒 运行 一 段 。 使 用 1 毫秒 的 延 
phe eae 完成 得 更 慢 ， 但 是 用 户 界面 会 保持 可 响应 状态 ， 用 户 会 觉得 浏览 器 没有 失 
控 ， 觉 得 更 舒服 。 


( fy) 的 延迟 执行 命令 在 实际 运行 的 时 候 会 延迟 更 多 ， 这 取决 于 浏览 器 和 
操作 系统 。 设 定 0 毫秒 的 延迟 并 不 意味 着 马上 执行 ， 而 是 指 “ 尽 快 执行 "。 比 如 ， 在 IE 中 


Web Workers 


现代 浏览 器 为 长 时 间 运 行 的 脚本 提供 了 另 一 种 解决 方案 : web workers。web workers 在 浏览 
器 内 部 提供 了 后 台 线 程 支持 ， 你 可 以 将 计算 量 很 大 的 部 分 放 到 一 个 单独 的 文件 中 ， 比 如 
my_web workerjs， 然 后 从 主 程序 (页 面 ) 中 这 样 调用 它 : 


var ww = new Worker('my_web_worker.js'); 
ww.onmessage = function (event) { 
document. body.innerHTML += 
"<p>message from the background thread: " + event.data + "</p>"; 


}; 


下 面 展 示 了 一 个 做 1 亿 次 简单 的 数学 运算 的 web worker : 


var end = 1e8, tmp = 1; 
postMessage('hello there'); 
while (end) { 

end -= 1; 

tmp += end; 


if (end === 5e7) { // 5e7 is the half of 1e8 
postMessage('halfway there, `tmp`ò is now ' + tmp); 
} 


} 


postMessage('all done'); 


web worker 使 用 postMessage() 来 和 调用 它 的 程序 通讯 ， 调 用 者 通过 onmessage 事 件 来 接受 更 
新 。onmessage 事 件 处 理 函 数 接受 一 个 事件 对 象 作 为 参数 ， 这 个 对 象 含有 一 个 由 web worker 
传 过 来 data 属 性 。 类 似 的 ， 调 用 者 〈 在 这 个 例子 中 ) 也 可 以 使 用 ww.postMessage() 来 给 web 
Worker 传 递 数 据 ，web worker 可 以 通过 一 个 onmessage 事 件 处 理 函 数 来 接受 这 些 数据 。 


上 面 的 例子 会 在 浏览 器 中 打印 出 : 


message from the background thread: hello there 
message from the background thread: halfway there, ‘tmp is now 3749999975000001 message 


a] Ea ee 





远程 脚本 编程 

现代 web 应 用 经 常会 使 用 远程 脚本 编程 和 服务 器 通讯 ， 而 不 刷新 当前 页 面 。 这 使 得 web 应 用 更 
灵活 ， 更 像 桌 面 程序 。 我 们 来 看 一 下 几 种 用 JavaScript 和 服务 器 通讯 的 方法 。 
XMLHttpRequest 


现在 ，XMLHttpRequest 是 一 个 特别 的 对 象 (构造 函数 ) ， 绝 大 多 数 浏览 器 都 可 以 用 ， 它 使 得 
我 们 可 以 从 JavaScript 来 发 送 HTTP 请 求 。 发 送 一 个 请 求 有 以 下 三 步 : 


1. 初始 化 一 个 XMLHttpRequest 对 象 (简称 XHR) 
2. 提供 一 个 回调 Be > 供 请 求 对 象 状态 改变 时 调用 


3， 发 送 请 求 
第 一 步 很 简单 : 


var xhr = new XMLHttpRequest(); 


但 是 在 IE7 之 前 的 版 本 中 ，XHR 的 功能 是 使 用 ActiveX 对 象 实现 的 ， 所 以 需要 做 一 下 兼容 处 
JẸ o 


第 二 步 是 给 readystatechange 事 件 提供 一 个 回调 函数 : 


xhr.onreadystatechange = handleResponse; 


最 后 一 步 是 使 用 open() 和 send() 两 个 方法 触发 请 求 。open() 方 法 用 于 初始 化 HTTP 请 求 的 方法 

(如 GET，POST) #URL 。send() 方 法 用 于 传递 POST 的 数据 ， 如 果 是 GET 方 法 ， 则 是 一 个 
空 字符 串 。open() 方 法 的 最 后 一 个 参数 用 于 指定 这 个 请 求 是 不 是 异步 的 。 异 步 是 指 浏 览 器 在 等 
待 响应 的 时 候 不 会 阻塞 ， 这 明显 是 更 好 的 用 户 体验 ， 因 此 除非 必须 要 同步 ， 否则 异步 参数 应 
该 使 用 true : 


xhr.open("GET", "page.html", true); 
xhr.send(); 


下 面 是 一 个 完整 的 示例 ， 它 获取 新 页 面 的 内 容 ， 然 后 将 当前 页 面 的 内 容 替 换 掉 〈 可 以 在 
<http://jspatterns.com/ book/8/xhr.html> 看 到 示例 ) 


var i, xhr, activeXids = [ 
"MSXML2.XMLHTTP.3.0', 
"MSXML2.XMLHTTP', 
"Microsoft .XMLHTTP 


l; 


if (typeof XMLHttpRequest === "function") { // native XHR 
xhr = new XMLHttpRequest(); 

} else { // IE before 7 
for (i = 0; i < activeXids.length; i += 1) { 


try { 
xhr = new ActivexObject(activeXids[i]); 
break; 
} catch (e) {} 
} 
} 
xhr.onreadystatechange = function () { 
if (xhr.readyState !== 4) { 
return false; 
} 
if (xhr.status !== 200) { 


alert("Error, status code: " + xhr.status); 
return false; 


document. body.innerHTML += "<pre>" + xhr.responseText + "<\/pre>"; }; 


xhr.open( "GET", "page.html", true); 
xhr.send(""); 


代码 中 的 一 些 说 明 : 


e 因为 IE6 及 以 下 版 本 中 ， 创 建 XHR 对 象 有 一 点 复杂 ， 所 以 我 们 通过 一 个 数组 列 出 ActiveX 
的 名 字 ， 然 后 遍历 这 个 数组 ， 使 用 try-catch 块 来 尝试 创建 对 象 。 

。 回调 函数 会 检查 xhr 对 象 的 readyState 属 性 。 这 个 属性 有 0 到 4 一 共 5 个 值 ，4 代 
表 “complete”( 完 成 ) 。 如 果 状 态 还 没有 完成 ， 我 们 就 继续 等 待 下 一 次 readystatechange 
事件 。 

。 回调 函数 也 会 检查 xhr 对 象 的 status 属 性 。 这 个 属性 和 HTTP 状 态 码 对 应 ， 比 如 200 (OK) 
或 者 是 404 (Not found) 。 我 们 只 对 状态 码 200 感 兴趣 ， 而 将 其 它 所 有 的 都 报 为 错误 (为 
了 简化 示例 ， 否 则 需要 检查 其 它 不 代表 出 错 的 状态 码 ) © 

e 上 面 的 代码 会 在 每 次 创建 XHR 对 象 时 检查 一 遍 支 持 情况 。 你 可 以 使 用 前 面 提 到 过 的 模式 
(如 条 件 初始 化 ) 来 重 写 上 面 的 代码 ， 使 得 只 需要 做 一 次 检查 。 


JSONP 


JSONP (JSON with padding) 是 另 一 种 发 起 远程 请 求 的 方式 。 与 XHR 不 同 ， 它 不 受 浏览 器 
同 源 策略 的 限制 ， 所 以 考虑 到 加 载 第 三 方 站 点 的 安全 影响 的 问题 ， 使 用 它 时 应 该 很 谨 懂 。 


一 个 XHR 请 求 的 返回 可 以 是 任何 类 型 的 文档 : 


e XML 文档 (过 去 很 常用 ) 
© HTML 片 段 (很 常用 ) 

e JSON 数 据 ( 轻 量 、 方 便 ) 
e 简单 的 文本 文件 及 其 它 


使 用 JSONP 的 话 ， 数 据 经 常 是 被 包 庄 在 一 个 泡 数 中 的 JSON， 咏 数 名 称 在 请 求 的 时 候 提 供 。 
JSONP 的 请 求 URL 通 常 是 像 这 样 : 

http://example.org/getdata.php?callback=myHandler 
getdata.php 可 以 是 任何 类 型 的 页 面 或 者 脚本 。callback 参 数 指定 用 来 处 理 响应 的 JavaScript 部 
数 。 


这 个 URL 会 被 放 到 一 个 动态 生成 的 \ 元 素 中 ， 像 这 样 : 


var script = document.createElement("script"); 
script.src = url; 
document .body.appendChild(script) ; 


服务 器 返回 一 些 作为 参数 传递 给 回调 函数 的 JSON 数 据 。 最 终 的 结果 实际 上 是 页 面 中 多 了 一 个 
新 的 脚本 ， 这 个 脚本 的 内 容 就 是 一 个 函数 调用 ， 如 : 


myHandler({"hello": "world"}); 


(译注 : 原文 这 里 说 得 不 是 太 明 白 。JSONP 的 返回 内 容 如 上 面 的 代码 片段 ， 它 的 工作 原理 是 
在 页 面 中 动态 插入 一 个 脚本 ， 这 个 脚本 的 内 容 是 函数 调用 +JSON 数 据 ， 其 中 要 调用 的 函数 是 
在 页 面 中 已 经 定义 好 的 ， 数 据 以 参数 的 形式 存在 。 一 般 情 况 下 数据 由 服务 端 动态 生成 ， 而 函 
数 由 页 面 生 成 ， 为 了 使 返回 的 脚本 能 调用 到 正确 的 函数 ， 在 请 求 的 时 候 一 般 会 带 上 callback 参 
数 以 便 后 台 动态 返回 处 理 函 数 的 名 字 。) 

JSONP 示 例 : FH HE 


我 们 来 看 一 个 使 用 JSONP 的 并 字 棋 游戏 示例 ， 玩 家 就 是 客户 端 (浏览 器 ) 和 服务 器 。 它 们 两 
者 都 会 产生 1 到 9 之 间 的 随机 数 ， 我 们 使 用 JSONP 去 取 服 务 器 产生 的 数字 (图 8-2) © 


你 可 以 在 http://jspatterns.com/book/8/ttt.html 玩 这 个 游戏 。 


图 8-2 使 用 JSONP 的 并 字 棋 游戏 


界面 上 有 两 个 按钮 : 一 个 用 于 开始 新 游戏 ， 一 个 用 于 取 服 务 器 下 的 棋 (客户 端 下 的 棋 会 在 一 
定数 量 的 延 时 之 后 自动 进行 ) 


<button id="new">New game</button> 
<button id="server">Server play</button> 


界面 上 包含 9 个 单元 格 ， 每 个 都 有 对 应 的 id， 比 如 : 


<td id="cell-1">&nbsp; </td> 
<td id="cell-2">&nbsp; </td> 
<td id="cell-3">&nbsp; </td> 


整个 游戏 是 在 一 个 全 局 对 象 ttt 中 实现 : 


var ttt = { 


}; 


// cells played so far 
played: [], 


// shorthand 
get: function (id) { 

return document .getElementById(id); 
} 


// handle clicks 

setup: function () { 
this.get('new').onclick = this.newGame; 
this.get('server').onclick = this.remoteRequest; 


} 


// clean the board 
newGame: function () { 
var tds = document.getElementsByTagName("td"), 
max = tds.length, 
1; 
for (i = 0; i < max; i += 1) { 
tds[i].innerHTML = "&nbsp;"; 


} 
ttt.played = []; 
}, 


// make a request 

remoteRequest: function () { 
var script = document.createElement("script"); 
script.src = "server.php?callback=ttt.serverPlay&played=" + ttt.played.join(','); 
document .body.appendChild(script) ; 

}, 


// callback, server's turn to play 
serverPlay: function (data) { 
if (data.error) { 
alert(data.error); 
return; 


} 


data = parseInt(data, 10); 
this.played.push(data); 


this.get('cell-' + data).innerHTML = '<span class="Server">X<\/span>'; 


setTimeout(function () { 
ttt.clientPlay(); 
}, 300); // as if thinking hard 
}, 


// client's turn to play 
clientPlay: function () { 
var data = 5; 


if (this.played.length === 9) { 
alert("Game over"); 
return; 

} 


// keep coming up with random numbers 1-9 

// until one not taken cell is found 

while (this.get('cell-' + data).innerHTML !== "&nbsp;") { 
data = Math.ceil(Math.random() * 9); 

} 


this.get('cell-' + data).innerHTML = '0'; 
this.played.push(data); 








tt 对象 维 护 着 一 个 已 经 填 过 的 单元 格 的 列表 ttt. played ， a 给 服务 器 ， 这 样 服务 器 就 
可 以 返回 一 个 没有 玩 过 的 数字 。 如 果 有 错误 发 生 ， 服 务 器 会 像 这 样 响 应 : 


ttt.serverPlay({"error": "Error description here"}); 


如 你 所 见 ，JSONP 中 的 回调 函数 必须 是 公开 的 并 且 全 局 可 访问 的 函数 ， 它 并 不 一 定 要 是 全 局 
函数 ， 也 可 以 是 一 个 全 局 对 象 的 方法 。 如 果 没 有 错误 发 生 ， 服 务 器 将 会 返回 一 个 函数 调用 ， 
像 这 样 


ttt.serverPlay(3); 
这 里 的 3 是 指 3 号 单元 格 是 服务 器 要 下 棋 的 位 置 。 在 这 种 情况 下 ， 数 据 非 常 简单 ， 甚 至 都 不 需 
要 使 用 JSON 格 式 ， 只 需要 一 个 简单 的 值 就 可 以 了 o 
框架 (frame) 和 图 片 信 标 (image beacon) 


A OO Se o Da S 它 的 


远程 脚本 编程 中 最 最 简单 的 情况 是 你 只 需要 传递 一 点 数据 给 服务 器 ， 而 并 不 需要 服务 器 的 响 
应 内 容 。 在 这 种 情况 下 ， 你 可 以 创建 一 个 新 的 图 片 ， 然 后 将 它 的 src 指向 服务 器 的 脚本 : 


new Image().src = "http://example.org/some/page.php"; 


这 种 模式 叫 作 图 片 信 标 ， 当 你 想 发 送 一 些 数据 给 服务 器 记录 时 很 有 用 ， 上 比如 做 访问 统计 。 因 
为 信和 标的 响应 对 你 来 说 完全 是 没有 用 的 ， 所 以 通常 a) ee 3 返回 一 个 1x1 
的 GIF 图 片 。 更 好 的 做 法 是 让 服务 器 返回 一 个 “204 No Content"HTTP 响 应 。 这 意味 着 返回 给 
客户 端的 响应 只 有 响应 头 (header) 而 没有 响应 体 (body) 。 


部 署 JavaScript 


在 生产 环境 中 使 用 JavaScript 时 ， 有 不 少 性 能 方面 的 考虑 。 我 们 来 讨论 一 下 最 重要 的 一 些 。 如 
果 需 要 了 解 所 有 的 细节 ， 可 以 参见 O'Reilly 出 社 的 《高 性 能 网 站 建设 指南 》 和 《高 性 能 网 站 建 
设 进 阶 指南 》。 


合并 脚本 


创建 高 性 能 网 站 的 第 一 个 原则 就 是 尽量 减少 外 部 引用 的 组 件 (译注 : 这 里 指 文 件 ) ， 因 为 
HTTP 请 求 的 代价 是 比较 大 的 。 具 体 就 JavaScript 而 言 ， 可 以 通过 合并 外 部 脚本 来 显著 提高 页 
面 加 载 速度 。 


我 们 假设 你 的 页 面 正 在 使 用 jQuery 库 ， 这 是 一 个 .js 文件 。 然 后 你 使 用 了 一 些 jQuery 插件 ， 
插件 也 是 单独 的 文件 。 这 样 的 话 在 你 还 一 行 代码 都 没有 写 wa 
把 这 些 文件 合并 起 来 是 很 有 意义 的 ， 尤 其 是 其 中 的 一 些 体积 很 小 (2-3kb) 时 ， 这 种 情况 下 ， 
HTTP 协 议 中 的 开销 会 比 下 载 本 身 还 大 。 合 并 脚本 的 意思 就 是 简单 地 创建 一 个 新 的 js 文件 ， 然 
后 把 每 个 文件 的 内 容 粘 贴 进去 。 


当然 ， 合 并 的 操作 应 该 放 在 代码 部 署 到 生产 环境 之 前 ， 而 不 是 在 开发 环境 中 ， 因 为 这 会 使 调 
试 变 得 困难 。 


合并 脚本 的 不 便 之 处 是 : 


。 在 部 署 前 多 了 一 步 操 作 ， 但 这 很 容易 使 用 命令 行 自 动 化 工具 来 做 ， 比 如 使 用 Linux/Unix 的 
cat : 


$ cat jquery.js jquery.quickselect.js jquery.limit.js > all.js 


© 失去 一 些 缓存 上 的 便利 一 一 当 你 对 某 个 文件 做 了 一 点 小 修改 之 后 ， 会 使 得 整个 合并 后 的 
代码 缓存 失效 。 o 受 定 一 个 发 布 计 划 ， 或 者 是 将 代码 合并 
为 两 个 文件 : 包含 可 能 会 经 常 变更 的 代码 ， 另 一 个 包含 那些 不 会 轻易 变更 的 "核心 "。 

En i er irene 
者 是 使 用 文件 内 容 的 hash 值 。 


这 就 是 主要 的 不 便 之 处 ， 但 它 带 来 的 好 处 却 是 远 远 大 于 这 些 麻 烦 的 。 


压缩 代码 
第 二 章 中 ， 我 们 讨论 过 代码 压缩 。 部 署 之 前 进行 代码 压缩 也 是 一 个 很 重要 的 步骤 。 
从 用 户 的 角度 来 想 ， 完 全 没有 必要 下 载 代码 中 的 注释 ， 因 为 这 些 注释 根本 不 影响 代码 运 


压缩 代码 带 来 的 好 处 多 少 取决 于 代码 中 注释 和 空白 的 数量 ， 也 取决 于 你 使 用 的 压缩 工具 。 平 
均 来 说 ， 压缩 可 以 减少 50% 左 右 的 体积 。 


服务 端 脚 本 压缩 也 是 应 该 要 做 的 事情 。 配 置 启用 gzip 压 缩 是 一 个 一 次 性 的 工作 ， 能 带 来 立 杆 见 
影 的 速度 提升 。 即 使 你 正在 使 用 共享 的 空间 ， 供 应 商 并 没有 提供 那么 多 服务 器 配置 的 空间 ， 


大 部 分 的 供应 商 也 会 允许 使 用 .htaccess 配 置 文件 。 所 以 可 以 将 这 些 加 入 到 站 点 根 目录 
的 .htaccess 文 件 中 : 


AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/javascri 
了 z 


平均 下 来 压缩 会 节省 70% 的 文件 体积 。 将 代码 压缩 和 服务 端 压缩 合计 起 来 ， 你 可 以 期 望 你 的 
用 户 只 下 载 你 写 出 来 的 未 压缩 文件 体积 的 15%。 





缓存 头 


与 流行 的 观点 相反 ， 文 件 在 浏览 器 缓存 中 的 时 间 并 没有 那么 久 。 你 可 以 尽 你 自己 的 努力 ， 通 
过 使 用 Expires 头 来 增加 非 首 次 访问 时 命中 缓存 的 概率 : 


这 也 是 一 个 在 .htaccess 中 做 的 一 次 性 配置 工作 : 


ExpiresActive On 
ExpiresByType application/x-javascript "access plus 10 years" 


它 的 苏 端 是 当 你 想 更 改 这 个 文件 时 ， 你 需要 给 它 重 命名 ， 如 果 你 已 经 处 理 好 了 合并 的 文件 命 
名 规则 ， 那 你 就 已 经 处 理 好 这 里 的 命名 问题 了 。 


使 用 CDN 


CDN 是 指 “ 文 件 分 发 网 络 ”(Content Delivery Network) 。 这 是 一 项 收费 〈 有 时 候 还 相当 多 
贵 ) 的 托管 服务 ， 它 将 你 的 文件 分 发 到 世界 上 各 个 不 同 的 数据 中 心 ， 但 代码 中 的 URL 却 都 是 
一 样 的 ， 这 样 可 以 使 用 户 更 快 地 访问 。 


即使 你 没有 CDN 的 预算 ， 你 仍然 有 一 些 可 以 免费 使 用 的 东西 : 


° a 流行 的 开源 库 ， 你 可 以 免费 使 用 ， 并 从 它 的 CDN 中 得 到 速度 提升 ( 译 
鉴于 Google 在 国内 的 槛 看 处 境 ， 不 建议 使 用 ) 

° <4 管 了 jQuery 和 自家 的 Ajax 库 

。 雅虎 在 自己 的 CDN 上 托管 了 YUI 库 


Ja BY RB 


怎样 在 页 面 上 引入 脚本 ， 这 第 一 眼看 起 来 是 一 个 简单 的 
的 JavaScript 代 码 或 者 是 在 src 属 性 中 指定 一 个 独立 的 文件 : 


元 素 ， 然 后 要 么 写 内 联 





// option 1 

<script> 

console.log("hello world"); </script> 
// option 2 

<script src="external.js"></script> 


但 是 ， 当 你 的 目标 是 要 构建 一 个 高 性 能 的 web 应 用 的 时 候 ， 有 些 模式 和 考虑 点 还 是 应 该 知道 
的 。 


作为 题 外 话 ， 来 看 一 些 比较 常见 的 开发 者 会 用 在 \ 元 素 上 的 属性 


e language="JavaScript" 


还 有 一 些 不 同 大 小 写 形式 的 JavaScript*， 有 的 时 候 还 会 带 上 一 个 版 本 号 。language 属 性 
不 应 该 被 使 用 ， 因 为 默认 的 语言 就 是 JavaScript。 版 本 号 也 不 像 想 象 中 工作 得 那么 好 ， 这 
应 该 是 一 个 设计 上 的 错误 。 


e type="text/javascript" 


这 个 属性 是 HTML4 和 XHTML1 标 准 所 要 求 的 ， 但 它 不 应 该 存在 ， 因 为 浏览 器 会 假设 它 就 
是 JavaScript。HTML5 不 再 要 求 这 个 属性 。 除 Re ， 否则 没有 任何 使 用 type 
的 理由 。 

e defer 


(或 者 是 HTML5 中 更 好 的 async) 是 一 种 指定 浏览 器 在 下 载 外 部 脚本 时 不 阻塞 页 面 其 它 部 
分 的 方法 ， 但 还 没有 被 广泛 支持 。 关 于 阻塞 的 更 多 内 容 会 在 后 面 提 及 。 


\ 元 素 的 位 置 


SCript 元 素 会 阻塞 页 面 的 下 载 。 浏 览 器 会 同时 下 载 好 几 个 组 件 (文件 ) ， 但 遇 到 一 个 外 部 脚本 
的 时 候 ， 会 停止 其 它 的 下 载 ， 直 到 脚本 文件 被 下 载 、 解 析 、 执 行 完 毕 。 这 会 严重 影响 页 面 的 
加 载 时 间 ， 尤 其 是 当 这 这 样 的 事件 在 页 面 加 载 时 发 生 多 次 的 时 候 。 


为 了 尽量 减 小 阻塞 带 来 的 影响 ， 你 可 以 将 script 元 素 放 到 页 面 的 尾部 ， 在 \</body> 之 前 ， 这 样 
就 没有 可 以 被 脚本 阻塞 的 元 素 了 。 此 时 ， 页 面 中 的 其 它 组 件 (文件 ) 已 经 被 下 载 完毕 并 呈现 
给 用 户 了 。 


最 坏 的 “ 反 模 式 " 是 在 文档 的 头 部 使 用 独立 的 文件 : 


<!doctype html> 

<html> 

<head> 
<title>My App</title> 
<!-- ANTIPATTERN --> 
<script src="jquery.js"></script> 
<script src="jquery.quickselect.js"></script> 
<script src="jquery.lightbox.js"></script> 
<script src="myapp.js"></script> 

</head> 

<body> 

</body> 

</html> 


一 个 更 好 的 选择 是 将 所 有 的 文件 合并 起 来 : 


<!doctype html> 
<html> 
<head> 
<title>My App</title> 
<script src="all_20100426.js"></script> 
</head> 
<body> 
</body> 
</html> 


最 好 的 选择 是 将 合并 后 的 脚本 放 到 页 面 的 尾部 : 


<!doctype html> 
<html> 
<head> 
<title>My App</title> 
</head> 
<body> 


<script src="all_20100426.js"></script> 


</body> 
</html> 


HTTP 分 块 


HTTP 协 议 支持 "分 块 编码 "。 它 允许 将 页 面 分 成 一 块 一 块 发 送 。 所 以 如 果 你 有 一 个 很 复杂 的 页 
面 ， 你 不 需要 将 那些 每 个 站 都 多 多 少 少 会 有 的 (静态) 头 部 信息 也 等 到 所 有 的 服务 端 工作 都 
完成 后 再 开始 发 送 。 


一 个 简单 的 策略 是 在 组 装 页 面 其 余部 分 的 时 候 将 页 面 \ 的 内 容 作为 第 一 块 发 送 。 也 就 是 像 这 样 
+: 


<!doctype html> 
<html> 
<head> 

<title>My App</title> 
</head> 
<!-- end of chunk #1 --> 
<body> 


<script src="all_20100426.js"></script> </body> 


</html> 
<!-- end of chunk #2 --> 


这 种 情况 下 可 以 做 一 个 简单 的 发 动 ， 将 JavaScript 移 回 \， 随 着 第 一 块 一 起 发 送 。 


这 样 的 话 可 以 让 服务 器 在 拿 到 head 区 内 容 后 就 开始 下 载 脚本 文件 ， 而 此 时 页 面 的 其 它 部 分 在 
服务 端 还 尚未 就 绪 : 


<!doctype html> 
<html> 
<head> 
<title>My App</title> 
<script src="all_20100426.js"></script> </body> 
</head> 
<!-- end of chunk #1 --> 
<body> 


</html> 
<!-- end of chunk #2 --> 


一 个 更 好 的 办 法 是 使 用 第 三 块 内 容 ， 让 它 在 页 面 尾部 ， 只 包含 脚本 。 如 果 有 一 些 每 个 页 面 者 
用 到 的 静态 的 头 部 ， 也 可 以 将 这 部 分 随和 一 块 一 起 发 送 : 


<!doctype html> <html> 
<head> 

<title>My App</title> </head> 
<body> 

<div id="header"> 

<img src="logo.png" /> 
</div> 
<!-- end of chunk #1 --> 
. The full body of the page ... 


<!-- end of chunk #2 --> 

<script src="all_20100426.js"></script> 
</body> 
</html> 
<!-- end of chunk #3 --> 


这 种 方法 很 适合 使 用 渐进 增强 思想 的 网 站 (关键 业务 不 依赖 JavaScript) 。 当 HTML 的 第 二 块 
发 送 完毕 的 时 候 ， 浏 览 器 已 经 有 了 一 个 加 载 、 显 示 完 毕 并 且 可 用 的 页 面 ， 就 像 禁用 JavaScript 
时 的 情况 。 SIS 第 三 块 到 达 时 ， 它 会 进一步 增强 页 面 ， 为 页 面 锦上添花 。 


动态 \ 元 素 实现 非 阻 塞 下 载 
前 面 已 经 说 到 过 ，JavaScript 会 阻塞 后 面 文件 的 下 载 ， 但 有 一 些 模式 可 以 防止 阻塞 : 


e 使 用 XHR 加 载 脚本 ， 然 后 作为 一 个 字符 串 使 用 eval() 来 执行 。 这 种 方法 受 同 源 策略 的 限 
制 ， 而 且 引 入 了 eval() 这 种 “ 反 模 式 ”。 

。 使 用 defer 和 async 属 性 ， 但 有 浏览 器 兼容 性 问题 

。 使 用 动态 \ 元 素 


一 种 是 一 个 很 好 并 且 实 际 可 行 的 模式 。 和 介绍 JSONP 时 所 做 的 一 样 ， 创 建 一 个 新 的 Script 
， 设 置 它 的 src 属 性 ， 然 后 将 它 放 到 页 o 


这 是 一 个 异步 加 载 JavaScript， 不 阻塞 其 它 文 件 下 载 的 示例 : 


var script document.createElement("script"); 
script.src "all_20100426.js"; 
document .documentElement.firstChild.appendChild(script); 


这 种 模式 的 缺点 是 ， 在 这 之 后 加 载 的 脚本 不 能 依赖 这 个 脚本 。 因 为 这 个 脚本 是 异步 加 载 的 ， 
所 以 无 法 保证 它 什么 时 候 会 被 加 载 进来 ， 如 果 要 依赖 的 话 ， 很 可 能 会 访问 到 〈 因 还 未 加 载 完 
毕 导 致 的 ) 未 定义 的 对 象 。 


如 果 要 解决 这 个 问题 ， 可 以 让 内 联 的 脚本 不 立即 执行 ， 而 是 作为 一 个 函数 放 到 一 个 数组 中 。 
当 依赖 的 脚本 加 载 完 毕 后 ， 再 执行 数组 中 的 所 有 兄 数 。 所 以 一 共有 三 个 步骤 。 


首先 ， 创 建 一 个 数组 用 来 存储 所 有 的 内 联 代码 ， 定 义 的 位 置 尽量 竺 前 : 


var mynamespace = { 
inline_scripts: [] 


RGU HBAS HE BRO ARMA G RHP BRP > KEHNA HA HAlinline_scriptsx& A 
中 ， 也 就 是 这 样 : 
// was: 
// <script>console.log("I am inline");</script> 
// becomes: 
<script> 
mynamespace.inline_scripts.push(function () { 


console.log("I am inline"); 


</script> 


最 后 一 步 是 使 用 异步 加 载 的 脚本 遍历 这 个 数组 ， 然 后 执行 函数 : 


var i, scripts = mynamespace.inline_scripts, max = scripts.length; 
for (i = 0; i < max; max += 1) { 

scripts[i](); 
} 


插入 \ 元 素 


通常 脚本 是 插入 到 文档 的 中 的 ， 但 其 实 你 可 以 插入 任何 元 素 中 ， 包 括 body ( 像 JSONP 示 例 中 
那样 ) 。 


在 前 面 的 例子 中 ， 我 们 使 用 documentElement 来 插 到 \ 中 ， 因 为 documentElement 就 是 \， 它 的 
第 一 个 子 元 素 是 \: 


document .documentElement.firstChild.appendChild(script); 


通常 也 会 这 样 写 : 


document .getElementsByTagName("head") [0].appendChild(script); 


当 你 能 控制 结构 的 时 候 ， 这 样 做 没有 问题 ， 但 是 如 果 你 在 写 挂件 《widget) 或 者 是 广告 时 ， 你 
并 不 知道 托管 它 的 是 一 个 什么 样 的 页 面 。 甚 至 可 能 页 面 上 连 \ 和 \ 都 没有 ， 尽 管 document.body 
在 绝 大 多 数 没 有 \ 标 签 的 时 候 也 可 以 工作 : 


document .body.appendChild(script)， 


可 以 肯定 页 面 上 一 定 存在 的 一 个 标签 是 你 正在 运行 Wo ages 。 (对 内 
联 或 者 外 部 文件 来 说 ) 如 果 没 有 script 标 签 ， 那 么 代码 就 不 会 运行 。 可 以 利用 这 一 事实 ， 在 页 
面 的 第 一 个 script 标 签 上 使 用 insertBefore() : 


var first_script = document.getElementsByTagName('script')[0]; 
first_script.parentNode.insertBefore(script, first_script); 


frist_script 是 页 面 中 一 定 存在 的 一 个 script 标 签 ，script 是 你 创建 的 新 的 script 元 素 。 


EIR Ho FX 


所 谓 的 延迟 加 载 是 指 在 页 面 的 load 事 件 之 后 再 加 载 外 部 文件 。 通 常 ， 将 一 个 大 的 合并 后 的 文件 
分 成 两 部 分 是 有 好 处 的 : 

页 面 初始 化 和 绑 定 Ul 元 素 的 事件 处 理子 数 必 须 的 

是 只 在 用 户 交 互 或 者 其 它 条 件 下 才 会 用 到 的 
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目标 就 是 逐步 加 载 页 面 ， 让 用 户 尽快 可 以 进行 一 些 操作 。 剩 余 的 部 分 可 以 在 用 户 可 以 看 到 页 
面 的 时 候 再 在 后 人 台 加 载 。 


加 载 第 二 部 分 JavaScript 的 方法 也 是 使 用 动态 Script 元素 ， 将 它 加 在 head 或 者 body 中 : 


. The full body of the page ... 


<!-- end of chunk #2 --> 
<script src="all_20100426.js"></script> 
<script> 
window.onload = function () { 
var script = document.createElement("script"); 
script.src = "all_lazy_20100426.js"; 
document .documentElement.firstChild.appendChild(script); 
}; 
</script> 
</body> 
</html> 
<!-- end of chunk #3 --> 


对 很 多 应 用 来 说 ， 延 迟 加 载 的 部 分 大 部 分 情况 下 会 比 核心 部 分 要 大 ， 因 为 我 们 关注 的 “ 行 
为 ” (比如 拖 放 、XHR、 动 画 ) 只 在 用 户 初始 化 之 后 才 会 发 生 。 


按 需 加 载 


前 面 的 模式 会 在 页 面 加 载 后 无 条 件 加 载 其 它 的 JavaScript， 并 假设 这 些 代码 很 可 能 会 被 用 到 。 
但 我 们 是 否 可 以 做 得 更 好 ， 分 部 分 加 载 ， 在 丨 正 需 要 使 用 的 时 候 才 加 载 那 一 部 分 ? 


假设 你 页 面 的 侧 边 栏 上 有 一 些 tabs。 点 击 tab 会 发 出 一 个 XHR 请 求 获取 内 容 ， 然 后 更 新 tab 的 内 
容 ， 然 后 有 一 个 更 新 的 动画 。 如 果 这 是 页 面 上 唯一 需要 XHR 和 动画 库 的 地 方 ， 而 用 户 又 不 点 
击 tab 的 话 会 怎样 ? 


下 面 介 绍 按 需 加 载 模式 。 你 可 以 创建 一 个 require() 函 数 或 者 方法 ， 它 接受 一 个 需要 被 加 载 的 脚 
本 文件 的 文件 名 ， 还 有 一 个 在 脚本 被 加 载 完毕 后 执行 的 回调 函数 。 


require() 函 数 可 以 被 这 样 使 用 : 


require("extra.js", function () { 
functionDefinedInExtraJS(); 
3); 


我 们 来 看 一 下 如 何 实现 这 样 一 个 函数 。 加 载 脚 本 很 简单 一 你 只 需要 按照 动态 \ 元 素 模式 做 就 
可 以 了 。 获 知 脚本 已 经 加 载 需 要 一 点 点 技巧 ， 因 为 浏览 器 之 间 有 差异 : 


function require(file, callback) { 


var script = document.getElementsByTagName('script')[0], newjs = document.createElement(' 


// TE 
newjs.onreadystatechange = function () { 
if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') { 
newjs.onreadystatechange = null; 
callback(); 
} 
}; 
// others 


newjs.onload = function () { 
callback(); 
}; 


newjs.src = file; 
script.parentNode.insertBefore(newjs, script); 


EES) 
} 


这 个 实现 的 几 点 说 明 : 





e 在 IE 中 需要 订阅 readystatechange 事 件 ， 然 后 判断 状态 是 否 为 "oaded" 或 者 “complete”。 
其 它 的 浏览 器 会 忽略 这 里 。 

e 在 Firefox，Safari 和 Opera 中 ， 通 过 onload 属 性 订阅 load 事 件 。 

e 这 个 方法 在 Safari 2 中 无 效 。 如 果 必 须要 处 理 这 个 浏览 器 ， 需 要 设 一 个 定时 器 ， 周 期 性 地 
去 检查 某 个 指定 的 变量 (在 脚本 中 定义 的 ) 是 否 有 定义 。 当 它 变 成 已 定义 时 ， 就 意味 着 
新 的 脚本 已 经 被 加 载 并 执行 。 


你 可 以 通过 建立 一 个 人 为 延迟 的 脚本 来 测试 这 个 实现 〈 模 拟 网 络 延 迟 ) ， 比 如 
ondemand.js.php， 如 : 

<?php 

header('Content-Type: application/javascript'); 

sleep(1); 

?> 

function extraFunction(logthis) { 

console.log('loaded and executed'); 


console.log(logthis); 
} 


IÆ A Xrequire() BA : 


require('ondemand.js.php', function () { 
extraFunction('loaded from the parent page'); 
document .body.appendChild(document.createTextNode('done!')); 


3); 


这 段 代码 会 在 console 中 打印 两 条 ， 然 后 页 面 中 会 显示 “donel”， 你 可 以 
在 http:Wjspatterns.com/book/7/ondemand.html 看 到 示例 。 


预 加 载 JavaScript 


在 延迟 加 载 模式 和 按 需 加 载 模式 中 ， 我 们 加 载 了 当前 页 面 需要 用 到 的 脚本 。 除 此 之 外 ， 我 们 
也 可 以 加 载 当前 页 面 不 需要 但 可 能 在 接 下 来 的 页 面 中 需要 的 脚本 。 这 样 的 话 ， 当 用 户 进入 第 
二 个 页 面 时 ， 脚 本 已 经 被 预 加 载 过 ， 整 体 体 验 会 变 得 更 快 。 


预 加 载 可 以 简单 地 通过 动态 脚本 模式 实现 。 但 这 也 意味 着 脚本 会 被 解析 和 执行 。 解 析 仅 仅 会 
在 页 面 加 载 时 间 中 增加 预 加 载 消耗 的 时 间 ， 但 执行 却 可 能 导致 JavaScript 错 误 ， 因 为 预 加 载 的 
脚本 会 假设 自己 运行 在 第 二 个 页 面 上 ， 比 如 找 一 个 特写 的 DOM 节 点 就 可 能 出 错 。 


仅 加 载 脚本 而 不 解析 和 执行 是 可 能 的 ， 这 也 同样 适用 于 CSS 和 图 像 。 
在 IE 中 ， 你 可 以 使 用 熟悉 的 图 片 信 标 模式 来 发 起 请 求 : 


new Image().src = "preloadme.js"; 


在 其 它 的 浏览 器 中 ， 你 可 以 使 用 \ 替 代 script 元 素 ， 然 后 将 它 的 data 属 性 指向 脚本 的 URL : 


var obj = document.createElement('object'); 
obj.data = "preloadme.js"; 
document .body.appendChild(obj); 


为 了 阻止 object 可 见 ， 你 应 该 设置 它 的 width 和 height 属 性 为 0。 


你 可 以 创建 一 个 通用 的 preload() 函 数 或 者 方法 ， 使 用 条 件 初始 化 模式 〈 第 4 章 ) 来 处 理 浏览 器 
差异 : 


var preload; 
if (/*@cc_on!@*/false) { // IE sniffing with conditional comments 
preload = function (file) { 
new Image().src = file; 
J; 
} else { 
preload = function (file) { 
var obj = document.createElement('object'), 
body = document .body; 


obj.width = 0; 
obj.height = 0; 
obj.data = file; 

body .appendChild(obj); 


使 用 这 个 新 函数 : 


preload('my_web_worker.js'); 


这 种 模式 的 坏处 在 于 存在 用 户 代理 (浏览 器 ) 嗅 探 ， 但 这 里 无 法 避免 ， 因 为 特性 检测 没有 办 
法 告知 足够 的 浏览 器 行为 信息 。 比 如 在 这 个 模式 中 ， 理 论 上 你 可 以 测试 typeof Image 是 否 

是 function" 来 代替 嗅 探 。 但 这 种 方法 其 实 没 有 作用 ， 因 为 所 有 的 浏览 器 都 支持 new Image(); 
只 是 有 一 些 浏览 器 会 为 图 片 单独 做 缓存 ， 意 味 着 作为 图 片 缓存 下 来 的 组 件 〈 文 件 ) 在 第 二 个 
页 面 中 不 会 被 作为 脚本 取出 来 ， 而 是 会 重新 下 载 。 


浏览 器 噢 探 中 使 用 条 件 注 释 很 有 意思 ， 这 明显 比 在 navigator.userAgent 中 找 字 符 串 要 安 
全 得 多 ， 因 为 用 户 可 以 很 容易 地 修改 这 些 字符 串 。 比如 : var isIE = /@cc_on!@/false; 
会 在 其 它 的 浏览 器 中 将 isIE 设 为 false (因为 忽略 了 注释 ) ， 但 在 IE 中 会 是 true， 因 为 在 条 

件 注 释 中 有 取 反 运算 符 !。 在 IE 中 就 像 是 这 样 : var islE = Halse; // true 


预 加 载 模式 可 以 被 用 于 各 种 组 件 (文件 ) ， 而 不 仅仅 是 脚本 。 比 如 在 登录 页 就 很 有 用 。 当 用 
户 开 始 输入 用 户 名 时 ， 你 可 以 使 用 打字 的 时 间 开 始 预 加 载 ( 非 敏感 的 东西 ) ， 因 为 用 户 很 可 
能 会 到 第 二 个 也 就 是 登录 后 的 页 面 。 


在 前 一 章 中 我 们 讨论 了 JavaScript 核 心 的 模式 ， 它 们 与 环境 无 关 ， 这 一 章 主要 关注 了 只 在 客户 
端 浏览 器 环境 中 应 用 的 模式 。 


我 们 看 了 

。 分 离 的 思想 (HTML: AR? CSS: 表现 ，JavaScript : 行为 ) ， 只 用 于 增强 体验 的 
JavaScript 以 及 基于 特性 检测 的 浏览 器 探测 。 (尽管 在 本 章 的 最 后 你 看 到 了 如 何 打 破 这 
模式 。) 

。 DOM 编 程 一 一 加 速 DOM 访 问 和 操作 的 模式 ， 主 要 通过 将 DOM 操 作 集 中 在 一 起 来 实现 ， 
因为 频繁 和 DOM 打 交道 代码 是 很 高 的 。 





事件 ， 跨 浏览 器 的 事件 处 理 ， 以 及 使 用 事件 代码 来 减少 事件 处 理 函 数 的 绑 定 数量 以 提高 
性 能 。 

两 种 处 理 长 时 间 大 计算 量 脚本 的 模式 
和 在 现代 浏览 器 中 使 用 web workers。 

多 种 用 于 远程 编程 ， 进 行 服务 器 和 客户 端 通讯 的 模式 
标 。 

在 生产 环境 中 部 署 JavaScript 的 步骤 一 “将 脚本 合并 为 更 少 的 文件 ， 压 缩 和 gzip (SHG 
省 85%) ， 可 能 的 话 托 管 到 CDN 并 发 送 Expires 头 来 提升 缓存 效果 。 

基于 性 能 考虑 引入 页 面 脚本 的 模式 ， 包 括 : 放置 \ 元 素 的 位 置 ， 同 时 也 可 以 从 HTTP 分 块 获 
益 。 为 了 减少 页 面 初 始 化 时 加 载 大 的 脚本 文件 引起 的 初始 化 工作 量 ， 我 们 讨论 了 几 种 不 
同 的 模式 ， 比 如 延迟 加 载 、 预 加 载 和 按 需 加 载 。 





使 用 setTimeout() 将 长 时 间 操 作 拆 分 为 小 块 执行 
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